Hover Like Button

By Rafi

F6
#
button hover interaction
How do I use This?

Hover over the button for a unique hover effect.

HTML
<!-- use a tag for links to other locations -->
<a class="button button-rounded-hover">Hover Link</a>

<!-- use button tag for on page actions -->
<button class="button button-rounded-hover">Hover Button</button>


$button-rounded-hover-radius: 5000px;
$button-rounded-hover-border: 5px solid darken($primary-color, 10%);

.button-rounded-hover {
  border: 0;
  border-radius: $button-rounded-hover-radius;
  padding: 1rem 2rem;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  font-size: 1rem;
  letter-spacing: 2px;
  transition: all 0.35s ease;
  transform: translateZ(0);
}

.button-rounded-hover:before {
  opacity: 0;
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border-radius: inherit;
  background-color: $white;
  transition: all 0.3s;
  transform: translateX(-100%);
}

.button-rounded-hover:after {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border: $button-rounded-hover-border;
  content: '';
  border-radius: inherit;
}

.button-rounded-hover:hover,
.button-rounded-hover:focus {
  background-color: darken($primary-color, 10%);
}

.button-rounded-hover:hover:before,
.button-rounded-hover:focus:before {
  transform: translateX(0%);
  opacity: 0.25;
}



.button-rounded-hover {
  border: 0;
  border-radius: 5000px;
  padding: 1rem 2rem;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  font-size: 1rem;
  letter-spacing: 2px;
  transition: all 0.35s ease;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.button-rounded-hover:before {
  opacity: 0;
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border-radius: inherit;
  background-color: #fefefe;
  transition: all 0.3s;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
}

.button-rounded-hover:after {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border: 5px solid #115b8d;
  content: '';
  border-radius: inherit;
}

.button-rounded-hover:hover,
.button-rounded-hover:focus {
  background-color: #115b8d;
}

.button-rounded-hover:hover:before,
.button-rounded-hover:focus:before {
  -webkit-transform: translateX(0%);
      -ms-transform: translateX(0%);
          transform: translateX(0%);
  opacity: 0.25;
}
JS

Similar Building Blocks

control

Like Button

F6
by Christine Siu
control

Social Icon Buttons

F6
by Rafi
control

Shopping Cart Button

F6
by Christine Siu