#ButtonChallenge6

#ButtonChallenge6.markdown

#ButtonChallenge6

A collection of my #ButtonChallenge can be found here > http://codepen.io/collection/riHLy/

A Pen by Hornebom on CodePen.

License.

index.html

<a class="btn-edge" href="#">Hover Me</a>

style.css

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:700);
*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  padding-top:10%;
  text-align:center;
  overflow-x:hidden;
}
.btn-edge {
  position:relative;
  display:inline-block;
  padding:1rem 2rem;
  font-family:'Titillium Web', sans-serif;
  font-weight:700;
  text-decoration:none;
  font-size:3rem;
  color:#333;
  background-image:
    linear-gradient(#333,#333),
    linear-gradient(#333,#333),
    linear-gradient(#333,#333),
    linear-gradient(#333,#333),
    linear-gradient(#333,#333),
    linear-gradient(#333,#333),
    linear-gradient(#333,#333),
    linear-gradient(#333,#333);
  background-repeat:no-repeat;
  background-size:
    2rem 5px,
    2rem 5px,
    2rem 5px,
    2rem 5px,
    5px 2rem,
    5px 2rem,
    5px 2rem,
    5px 2rem;
  background-position:
    0 0,
    100% 0,
    0 100%,
    100% 100%;
  box-shadow:inset 0 0 0 5px rgba(tomato, 0);
  transition:
    background-size 1s .4s, 
    box-shadow .4s, 
    color .4s;
  transform:translateZ(0);
  
  &:hover {
    color:tomato;
  background-size:
    52% 5px,
    52% 5px,
    52% 5px,
    52% 5px,
    5px 52%,
    5px 52%,
    5px 52%,
    5px 52%;
    box-shadow:inset 0 0 0 5px rgba(tomato, 1);
    transition:
    background-size 1s, 
    box-shadow .4s .6s, 
    color .4s .6s;
  }
}