Snippet 14 : Hover Effect Button – 14

Snippet ini akan menganimasikan growing border

@import url(https://fonts.googleapis.com/css?family=BenchNine:700);

body {
 margin: 0;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: #272727;
}

button {
  border: none;
  padding: 12px 40px;
  background-color: #c47135;
  color: white;
  font-family: 'BenchNine';
  font-size: 22px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
}

button:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  top: -5px;
  left: -5px;
  border-top: 2px solid #c47135;
  border-left: 2px solid #c47135;
  transition: all 0.25s;
}

button:hover:before,
button:hover:after {
  height: 100%;
  width: 100%;
}

button:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: -5px;
  right: -5px;
  border-bottom: 2px solid #c47135;
  border-right: 2px solid #c47135;
  transition: all 0.25s;
}