|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Button</title> |
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
|
<!-- Latest compiled and minified CSS --> |
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> |
|
<style type="text/css"> |
|
body{ |
|
padding: 2em; |
|
} |
|
.btn-arrow { |
|
position: relative; |
|
} |
|
.btn-md { |
|
padding: 15px 45px; |
|
font-size: 16px; |
|
} |
|
.btn-info-gradiant { |
|
background: #188ef4; |
|
background: -webkit-linear-gradient(legacy-direction(to right), #188ef4 0%, #316ce8 100%); |
|
background: -webkit-gradient(linear, left top, right top, from(#188ef4), to(#316ce8)); |
|
background: -webkit-linear-gradient(left, #188ef4 0%, #316ce8 100%); |
|
background: -o-linear-gradient(left, #188ef4 0%, #316ce8 100%); |
|
background: linear-gradient(to right, #188ef4 0%, #316ce8 100%); |
|
color: #fff; |
|
border: 0px; |
|
} |
|
.btn-arrow span { |
|
display: inline-block; |
|
position: relative; |
|
-webkit-transition: all 300ms ease-out; |
|
-o-transition: all 300ms ease-out; |
|
transition: all 300ms ease-out; |
|
will-change: transform; |
|
} |
|
.btn-arrow i { |
|
position: absolute; |
|
width: 1.1em; |
|
right: 0px; |
|
right: 0rem; |
|
opacity: 0; |
|
top: 50%; |
|
-webkit-transform: translateY(-50%); |
|
-ms-transform: translateY(-50%); |
|
transform: translateY(-50%); |
|
-webkit-transition: all 300ms ease-out; |
|
-o-transition: all 300ms ease-out; |
|
transition: all 300ms ease-out; |
|
will-change: right, opacity; |
|
} |
|
.btn-info-gradiant:hover { |
|
background: #316ce8; |
|
background: -webkit-linear-gradient(legacy-direction(to right), #316ce8 0%, #188ef4 100%); |
|
background: -webkit-gradient(linear, left top, right top, from(#316ce8), to(#188ef4)); |
|
background: -webkit-linear-gradient(left, #316ce8 0%, #188ef4 100%); |
|
background: -o-linear-gradient(left, #316ce8 0%, #188ef4 100%); |
|
background: linear-gradient(to right, #316ce8 0%, #188ef4 100%); |
|
color: #fff; |
|
} |
|
.btn-arrow:hover span, .btn-arrow:focus span { |
|
-webkit-transform: translate3d(-1rem, 0, 0); |
|
transform: translate3d(-1rem, 0, 0); |
|
} |
|
.btn-arrow:hover i, .btn-arrow:focus i { |
|
opacity: 1; |
|
right: -2rem; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<a class="btn btn-info-gradiant btn-md btn-arrow m-t-20" href="#"><span>Explore More <i class="fa fa-arrow-right"></i></span></a> |
|
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> |
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
|
</body> |
|
</html> |
