<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/brunobeneducci/pen/VrGmGZ" />
<style class="cp-pen-styles">
body {background-color: #fff;}
body .container {width: 70%; margin: 0 auto;}
.col4 {width: 33.33333333%; float: left; position: relative; text-align: center;}
.col4 .box-fx {background-color: #eee; margin: 20px; padding: 50px;}
.center {margin: 0 auto;}
.transition {-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
.btn {padding: 15px; text-transform: uppercase; display: inline-block; line-height: 0; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-image: none;}
.btn-fx1 {margin: 0 15px; background-color: #2a232c; color: #fff; animation: button1 1s ease infinite;}
.btn-fx1:hover, .btn-fx1:focus {background-color: #602a8f; animation: hoverfx 1s ease 1;}
.btn-fx2 {margin: 0 15px; background-color: #2a232c; color: #fff; animation: button2 1s ease infinite;}
.btn-fx2:hover, .btn-fx1:focus {background-color: #602a8f; animation: hoverfx 1s ease 1;}
.btn-fx3 {margin: 0 15px; background-color: #2a232c; color: #fff; animation: button3 1s ease infinite;}
.btn-fx3:hover, .btn-fx2:focus {background-color: #602a8f; animation: hoverfx 1s ease 1;}
.btn-fx4 {margin: 0 15px; background-color: #2a232c; color: #fff; animation: button4 1s ease infinite;}
.btn-fx4:hover, .btn-fx2:focus {background-color: #602a8f; animation: hoverfx 1s ease 1;}
.btn-fx5 {margin: 0 15px; background-color: #2a232c; color: #fff; animation: button5 1s ease infinite;}
.btn-fx5:hover, .btn-fx2:focus {background-color: #602a8f; animation: hoverfx 1s ease 1;}
.btn-fx6 {margin: 0 15px; background-color: #2a232c; color: #fff; animation: button6 1s ease infinite;}
.btn-fx6:hover, .btn-fx2:focus {background-color: #602a8f; animation: hoverfx 1s ease 1;}
@keyframes hoverfx {
0% {-moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
50% {-moz-transform: scale(.9); -webkit-transform: scale(.9); -o-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9);}
100% {-moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
}
@keyframes button1 {
0% {-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
50% {-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(-10px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(-10px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(0deg) translateX(0px) translateY(-10px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(-10px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(0deg) translateX(0px) translateY(-10px) skewX(0deg) skewY(0deg);}
100% {-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
}
@keyframes button2 {
0% {-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
20% {-moz-transform: scale(1) rotate(0deg) translateX(5px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(0deg) translateX(5px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(0deg) translateX(5px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(0deg) translateX(5px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(0deg) translateX(5px) translateY(0px) skewX(0deg) skewY(0deg);}
40% {-moz-transform: scale(1) rotate(0deg) translateX(-5px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(0deg) translateX(-5px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(0deg) translateX(-5px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(0deg) translateX(-5px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(0deg) translateX(-5px) translateY(0px) skewX(0deg) skewY(0deg);}
60% {-moz-transform: scale(1) rotate(0deg) translateX(5px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(0deg) translateX(5px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(0deg) translateX(5px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(0deg) translateX(5px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(0deg) translateX(5px) translateY(0px) skewX(0deg) skewY(0deg);}
80% {-moz-transform: scale(1) rotate(0deg) translateX(-5px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(0deg) translateX(-5px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(0deg) translateX(-5px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(0deg) translateX(-5px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(0deg) translateX(-5px) translateY(0px) skewX(0deg) skewY(0deg);}
100% {-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
}
@keyframes button3 {
0% {opacity: .5;}
50% {opacity: 1;}
100% {opacity: .5;}
}
@keyframes button4 {
0% { -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-box-shadow: 0px 10px 15px -6px rgba(0,0,0,0); -moz-box-shadow: 0px 10px 15px -6px rgba(0,0,0,0); box-shadow: 0px 10px 15px -6px rgba(0,0,0,0);}
50% { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-box-shadow: 0px 10px 15px -6px rgba(0,0,0,0.5); -moz-box-shadow: 0px 10px 15px -6px rgba(0,0,0,0.5); box-shadow: 0px 10px 15px -6px rgba(0,0,0,0.5);}
100% { -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-box-shadow: 0px 10px 15px -6px rgba(0,0,0,0); -moz-box-shadow: 0px 10px 15px -6px rgba(0,0,0,0); box-shadow: 0px 10px 15px -6px rgba(0,0,0,0);}
}
@keyframes button5 {
0% {-moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
50% {-moz-transform: scale(.8); -webkit-transform: scale(.8); -o-transform: scale(.8); -ms-transform: scale(.8); transform: scale(.8);}
100% {-moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
}
@keyframes button6 {
0% {-moz-transform: scale(1) rotate(-10deg) translateX(-10px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(-10deg) translateX(-10px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(-10deg) translateX(-10px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(-10deg) translateX(-10px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(-10deg) translateX(-10px) translateY(0px) skewX(0deg) skewY(0deg);}
50% {-moz-transform: scale(1) rotate(10deg) translateX(10px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(10deg) translateX(10px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(10deg) translateX(10px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(10deg) translateX(10px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(10deg) translateX(10px) translateY(0px) skewX(0deg) skewY(0deg);}
100% {-moz-transform: scale(1) rotate(-10deg) translateX(-10px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(-10deg) translateX(-10px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(-10deg) translateX(-10px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(-10deg) translateX(-10px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(-10deg) translateX(-10px) translateY(0px) skewX(0deg) skewY(0deg);}
}
@media screen and (max-width: 991px) {
.col4 {width: 50%;}
.fx5 a .item h4 {font-size: 13px;}
}
@media screen and (max-width: 580px) {
.col4 {width: 100%;}
} </style></head><body>
<div class="container">
<div class="col4">
<div class="box-fx">
<a class="btn btn-fx1" href="#">
<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#fff" d="M4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4M12,11L20,6H4L12,11M4,18H20V8.37L12,13.36L4,8.37V18Z" /> </svg>
</a>
</div>
</div>
<div class="col4">
<div class="box-fx">
<a class="btn btn-fx2" href="#">
<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#fff" d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" /> </svg>
</a>
</div>
</div>
<div class="col4">
<div class="box-fx">
<a class="btn btn-fx3" href="#">
<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#fff" d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z" /> </svg>
</a>
</div>
</div>
<div class="col4">
<div class="box-fx">
<a class="btn btn-fx4" href="#">
<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#fff" d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z" /> </svg>
</a>
</div>
</div>
<div class="col4">
<div class="box-fx">
<a class="btn btn-fx5" href="#">
<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#fff" d="M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z" /> </svg>
</a>
</div>
</div>
<div class="col4">
<div class="box-fx">
<a class="btn btn-fx6" href="#">
<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#fff" d="M5,1C5,3.7 6.56,6.16 9,7.32V22H11V15H13V22H15V7.31C17.44,6.16 19,3.7 19,1H17A5,5 0 0,1 12,6A5,5 0 0,1 7,1M12,1C10.89,1 10,1.89 10,3C10,4.11 10.89,5 12,5C13.11,5 14,4.11 14,3C14,1.89 13.11,1 12,1Z" /> </svg>
</a>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >// without js
//# sourceURL=pen.js
</script>
</body></html>
