Cool Button

cool-button.markdown

Cool Button

A simple but cool animation button :)

A Pen by Fabrizio on CodePen.

License.

index.html

<div class="wrapper">
  <a class="btn_fab">Prenota</a>
</div>

style.css

body{
  background-color: #000;
}

.wrapper{
  margin: 0 auto;
  text-align:center;
  margin-top: 300px;
}

.btn_fab{
  color: #fff;
  text-transform: uppercase;
  font-family:'Lato', sans-serif;
  letter-spacing: 5px;
  font-size: 12px;
  border: 2px solid #fff;
  padding: 15px 25px;
  position: relative;
  cursor: pointer;
}

a.btn_fab:hover{
  animation-name: change-background;
  animation-duration: .3s;
  -webkit-animation-delay: .3s; /* Chrome, Safari, Opera */
  animation-delay: .3s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes change-background {
    0%   {background: transparent;}
    100% {background: #fff; color: #000;}
}

a.btn_fab:before{
  position: absolute;
  content:"";
  width: 10px;
  height: 2px;
  left:0;
  top:22px;
  background-color: #fff;
  animation-name: right-to-left;
  animation-duration: .3s;
}

@-webkit-keyframes right-to-left {
    0%   {width: 100%;}
    50% {width: 100%; right: 0; }
  100% { width: 10px; left:0; right: auto; }
}

a.btn_fab:hover:before{
  animation-name: left-to-right;
  animation-duration: .3s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes left-to-right {
    0%   {width: 10px;}
    50% {width: 100%; left: 0; }
  100% { width: 10px; right:0; left: auto; }
}