CSS transform border button hover effects

CSS transform border button hover effects.markdown

CSS transform border button hover effects

Use of transform on before and after pseudo elements to create border effects on hover. no js.

A Pen by Les on CodePen.

License.

index.html

.box.foo
  foo
.box.bar
  bar
.box.curmudgeon
  curmudgeon
%div.link 
  Chat to me on 
  %a(href="https://ello.co/lesbaa") Ello :-)

style.css

* {
  font-family: sans-serif;
  font-weight: 100;
  font-size: 20px;
}

body {
  background-color: #3FB;
  text-align: center;
  line-height: 100vh;
}



.box {
  position:relative;
  vertical-align: middle;
  color: #0b7;
  display: inline-block;
  height: 60px;
  line-height: 60px;
  text-align: center;
  transition: 0.5s;
  padding: 0 20px;
  cursor: pointer;
  border: 2px solid #0b7;
  -webkit-transition:0.5s;
}

.box:hover {
  border: 2px solid rgba(0,160,80,0);
  color: #FFF;
}

.box::before, .box::after {
  width: 100%;
  height:100%;
  z-index: 3;
  content:'';
  position: absolute;
  top:0;
  left:0;
  box-sizing: border-box;
  -webkit-transform: scale(0);
  transition: 0.5s;
}

.foo::before {
  border-bottom: 3px solid #FFF;
  border-left: 3px solid #FFF;
  -webkit-transform-origin: 0 100%;
}

.foo::after {
  border-top: 3px solid #FFF;
  border-right: 3px solid #FFF;
  -webkit-transform-origin: 100% 0%;
}


.bar::before {
  border-bottom: 3px solid #FFF;
  border-left: 3px solid #FFF;
  -webkit-transform-origin: 100% 0%;
}

.bar::after {
  border-top: 3px solid #FFF;
  border-right: 3px solid #FFF;
  -webkit-transform-origin: 0% 100%;
}

.curmudgeon::before {
  border-bottom: 3px solid #FFF;
  border-left: 0;
  -webkit-transform-origin: 0% 100%;
}

.curmudgeon::after {
  border-top: 0;
  border-right: 0;
  -webkit-transform-origin: 50% 50%;
}

.box:hover::after, .box:hover::before {
  -webkit-transform: scale(1);
}

.link {
  line-height: 1em;
  position: absolute;
  bottom: 0;
  right: 20px;
  width: 300px;
  height: 50px;
  font-family: "Open Sans","Roboto",Arial,sans-serif;
  text-align: right; 
}

.link > a {
  text-decoration: none;
  color: #FF0;
}