Loading

Double Hover Effect Button

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Double Hover Effect Button</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="container text-center" >
  <a href="#0" class="btn-outline"> Learn More</More></a>
</div>
  
  
</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
body{
  background: #f2f2f2;
}
a{
  text-decoration: none;
}
.btn-outline{  
  font-family:sans-serif;
  padding: 15px 50px;
  text-align: center;
  border: 1px solid #1528A1;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  margin: 80px auto;
  position: relative;
  color: #1528A1 !important;
  box-shadow: inset 0px 0px 0px 0px #6098FF;
  display: inline-block;
  -webkit-transition: all .5s cubic-bezier(.2, .40, 0, 1);
  transition: all .5s cubic-bezier(.2, .40, 0, 1);
}

.btn-outline::before {
    content: '';
    position: absolute;
    bottom: 0%;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #1528A1;
    display: block;
    z-index: -1;
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transition: transform .6s cubic-bezier(.2, .40, 0, 1);
            -webkit-transition: -webkit-transform .6s cubic-bezier(.2, .40, 0, 1);
            transition: -webkit-transform .6s cubic-bezier(.2, .40, 0, 1);
            transition: transform .6s cubic-bezier(.2, .40, 0, 1);
            transition: transform .6s cubic-bezier(.2, .40, 0, 1), -webkit-transform .6s cubic-bezier(.2, .40, 0, 1);
}
.btn-outline:hover {
    text-decoration: none;
    background: #1528A1;
    box-shadow: inset 0px 60px 0px 0px #1528A1;
    color: #ffffff!important;
    border: 1px solid #1528A1;
}
.btn-outline:hover::before {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}
/* Downloaded from https://ahoj.co.uk/ */

This awesome code is write by Carlos1162, you can se more from this user in the personal repository