CSS Tricks6

CSS Border Drawing Effects

by Soya Natsuki

HTML

<html>
  <head>
    <title>CSS Animation Border Drawing Effects</title>
  </head>
  <body>
    <div class="box">
      <span class="border"></span>
      <h1>CSS<br><span>Border</span>Hover<br>Effects</h1>
    </div>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
 }

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
  box-sizing: border-box;
}

.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-top: 4px solid #58c747;
  border-bottom: 4px solid #58c747;
  box-sizing: border-box;
  transform: scaleX(0);
  transition: .5s;
}

.box:hover:before {
   transform: scaleX(1);
}

.box:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-right: 4px solid #58c747;
  border-left: 4px solid #58c747;
  box-sizing: border-box;
  transform: scaleY(0);
  transition: .5s;
}

.box:hover:after {
   transform: scaleY(1);
   transition-delay: .5s;
}

.box h1 span {
  font-size: 36px;
  display: block;
  color: #58c747;
}

.box h1 {
  margin: 0;
  padding: 0;
  color: #262626;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  font-size: 24px;
  text-transform: uppercase;
  z-index: 1;
}

.box span.border {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(45deg);
  pointer-events: none;
  box-sizing: border-box;
}

.box span.border:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-top: 4px solid #58c747;
  border-bottom: 4px solid #58c747;
  box-sizing: border-box;
  transform: scaleX(0);
  transition: .5s;
}

.box:hover span.border:before {
   transform: scaleX(1);
   transition-delay: 1s;
}

.box span.border:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-right: 4px solid #58c747;
  border-left: 4px solid #58c747;
  box-sizing: border-box;
  transform: scaleY(0);
  transition: .5s;
}

.box:hover span.border:after {
   transform:...