CSS3 Slick Button Hover Effect

CSS3 Slick Button Hover Effect

Slick Little Button By Karim Balaa

If you want to see this CSS3 button in action, check out the demo!
Demo | Source Code

Html Markup

<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>

<h1>Slick Little Button</h1>
<div class="btn">
  <svg>
    <rect x="0" y="0" fill="none" width="166" height="45"/>
  </svg>
 Hover
</div>

 

CSS (SCSS)

* {
    -webkit-transition-property: all;
    -webkit-transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
    -moz-transition-property: all;
    -moz-transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
}
h1{  font-family: 'Oswald', sans-serif;
  color:#c78e2d;
}
body {
  background-color: #f3af3a;
  padding-top: 70px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  font-weight:100;
}


.btn {
  position: relative;
  display: inline-block;
  width: 166px;
  height: 45px;
  font-size: 12px;
  line-height: 45px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
}
.btn svg {
  position: absolute;
  top: 0; left: 0;
}
.btn svg rect {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 422, 0;
 
  @include transition(all 1300ms $ease-out-expo);
}
.btn:hover svg rect {
  stroke-width: 5;
  stroke-dasharray: 10, 310;
  stroke-dashoffset: 33;
}

.btn:hover {
  color:#fff;
  font-size:18px;
  letter-spacing:1px;
  font-weight:bold;
}

See the Pen Slick Button by Karim Balaa (@karimbalaa) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *