<div class="container">
   
   <h1 class="headline">Button Hover Effects</h1>
   <h2 class="subline">Created by <a href="http://samflick.me">Sam Flick</a></h2>
   
   <div class="button-group">
      <div>
         <a href="http://samflick.me" class="btn btn1">BUTTON</a>
      </div>
      
      <br>
      <hr>
      <br>
      
      <div>
         <a href="http://samflick.me" class="btn btn2">BUTTON</a>
      </div>
      
      <br>
      <hr>
      <br>
      
      <div>
         <a href="http://samflick.me" class="btn btn3">BUTTON</a>
      </div>
      
      <br>
      <hr>
      <br>
      
      <div>
         <a href="http://samflick.me" class="btn btn4">BUTTON</a>
      </div>
      
      <br>
      <hr>
      <br>
      
      <div>
         <a href="http://samflick.me" class="btn btn5">BUTTON</a>
      </div>
      
      <br>
      <hr>
      <br>
      
      <div>
         <a href="http://samflick.me" class="btn btn6">BUTTON</a>
      </div>
      
      <br>
      <hr>
      <br>
      
      <div>
         <a href="http://samflick.me" class="btn btn7">BUTTON</a>
      </div>
      
      <br>
      <hr>
      <br>
      
      <div>
         <a href="http://samflick.me" class="btn btn8">BUTTON</a>
      </div>
      
      <br>
      <hr>
      <br>
      
   </div>
   
 <div class="social-links">
    <ul>
       <li><a href="http://instagram.com/samflickgraphics">Instagram</a></li>
       <li><a href="https://twitter.com/samflickgraphi">Twitter</a></li>
       <li><a href="http://behance.net/samflickgraphics">Behance</a></li>
    </ul>
 </div>
   
</div>
@import url('https://fonts.googleapis.com/css?family=Poppins')

/* Variables */
$yellow: #f1c40f
$cyan: #1abc9c
$red: #e74c3c
$green: #2ecc71
$purple: #9b59b6
$orange: #e67e22
$black: #000a0f
$pink: #d81b60
$lime: #76ff03

/* General */

*
  box-sizing: border-box

body
  background: #f5f5f5
  font-family: 'Poppins', sans-serif
  

.container
  margin-left: 50px
  margin-right: 50px
  margin-top: 50px
  background: white
  box-shadow: 2.5px 2.5px 20px 5px rgba(176,176,176,0.3)
  padding: 100px

hr
  border: solid 1.5px $black
  width: 75%

/* Headline Text */

.headline
  font-size: 50px
  text-align: center
.subline
  font-size: 25px
  text-align: center
  margin-bottom: 125px
  a
    color: $black
    text-decoration: none
    border-bottom: solid 3px #000a0f
    padding: 0 5px
    transition: 0.75s
    &:hover
      background: $black
      color: #fff

/* Button Group */

.button-group
  width: 100%
  text-align: center
  margin-bottom: 125px
  div
    margin: 5em 0
  a
    padding: 10px 30px
    margin: 1em 
    border-radius: 5px
    text-decoration: none
    transition: 0.5s ease-in-out
   
/* Button Styling */

.btn
  color: #FFF
  font-size: 20px

.btn1
  background-color: $yellow
  &:hover
    box-shadow: 0px 0px 0px 2.5px #fff, 0px 0px 0px 5px $yellow, 0px 0px 0px 10px white, 0px 0px 0px 10.5px $yellow
    background: white
    color: $yellow

.btn2
  background-color: $cyan
  &:hover
    box-shadow: 0px 0px 0px 2.5px white inset, 0px 0px 0px 5px $cyan

.btn3
  background-color: $red
  letter-spacing: 0px
  &:hover
    letter-spacing: 10px
    box-shadow: 2.5px 2.5px 0px 5px white, 5px 5px 0px 7.5px $red
    background: none
    border: 2.5px solid $red
    color: $red

.btn4
  background-color: $green
  &:hover
    padding: 1em 1.5em
    letter-spacing: 2.5px
    box-shadow: 0 0 0 2px white, 0 0 0 3px $green, 0 0 0 2px white inset, 0 0 0 5px $green, 7.5px 7.5px 0 2.5px white ,10px 10px 0 5px $green

.btn5
  background-color: $purple
  &:hover
    box-shadow: 0px 0px 0 5px white, 0 0px 0 5px white, 10px 0px 0 10px $purple, 15px 0 0 5px white, -10px 0 0 10px $purple, -15px 0 0 5px white
    background: none
    color: $purple
    border-bottom: solid 5px $purple

.btn6
  background-color: $orange
  &:hover
    box-shadow: 0 0 0 5px white inset, 0 0 0 7.5px $orange inset, 0 0 0 10px white inset, 0 0 0 1px $orange, 0 0 0 3px white, 0 0 0 5px $orange
    background: none
    color: $orange
    border-radius: 10px

.btn7
  background-color: $pink
  &:hover
    box-shadow: 2.5px 2.5px 0 2.5px white, -2.5px -2.5px 0 2.5px white, 0 0 0 2px white inset, 10px 10px 0 10px $pink, -10px -10px 0 10px $pink

.btn8
  background-color: $lime
  &:hover
    box-shadow: 0 0 0 1px white, 0 0 0 2px $lime, 0 0 0 5px $lime, 0 0 0 6.5px white, 0 0 0 7px $lime
    border-radius: 100px
    background: none
    color: $lime

/* Social Links */

.social-links
  text-align: center
  ul
    list-style: none
    li
      display: inline-block
      padding: 10px
      
.social-links a
  color: $black
  font-size: 10px
  text-decoration: none
  padding: 5px
  border-bottom: solid 1.5px $black
  transition: 0.75s
  &:hover
    background: $black
    color: #fff
   
/* Media Queries */
@media only screen and (max-width: 768px)
  .headline
    font-size: 25px
  .subline
    font-size: 12.5px
  .btn
    font-size: 10px
   
@media only screen and (max-width: 420px)
  .container
    margin-left: 10px
    margin-right: 10px
    
  .headline
    font-size: 20px
  .subline
    font-size: 10px
  .btn
    font-size: 8px
    
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.