|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Button hover transition</title> |
|
|
|
<style> |
|
/* Button / Transition inspired from http://icorinc.com */ |
|
|
|
html { |
|
background: url("./a_nice_landscape.jpg") no-repeat fixed center center / cover rgba(0, 0, 0, 0); |
|
height: 100%; |
|
width: 100%; |
|
} |
|
.container { |
|
min-height: 60px; |
|
min-width: 210px; |
|
left: 50%; |
|
top: 50%; |
|
margin: -30px 0 0 -105px; |
|
position: absolute; |
|
} |
|
a.btn { |
|
display: block; |
|
position: relative; |
|
height: 60px; |
|
width: 210px; |
|
text-decoration: none; |
|
} |
|
.btn .text { |
|
display: block; |
|
position: relative; |
|
color: #EBEBEB; |
|
font-size:16px; |
|
font-width: bold; |
|
text-align: center; |
|
text-transform: uppercase; |
|
line-height: 56px; |
|
width: 210px; |
|
border: 2px solid rgba(255, 255, 255, 0.8); |
|
-moz-box-sizing: border-box; |
|
-webkit-box-sizing: border-box; |
|
box-sizing: border-box; |
|
z-index: 2; |
|
} |
|
.btn .frame { |
|
display: block; |
|
position: absolute; |
|
left: 0; |
|
top: 0; |
|
height: 60px; |
|
width: 210px; |
|
border-style: solid; |
|
border-width: 30px 105px; |
|
border-color: rgba(250, 250, 250, 0.1); |
|
-moz-transition-duration: .25s; |
|
-moz-transition-property: border; |
|
-moz-transition-delay: 0; |
|
-moz-transition-timing-function: linear; |
|
-webkit-transition-duration: .25s; |
|
-webkit-transition-property: border; |
|
-webkit-transition-delay: 0; |
|
-webkit-transition-timing-function: linear; |
|
transition-duration: .25s; |
|
transition-property: border; |
|
transition-delay: 0; |
|
transition-timing-function: linear; |
|
-moz-box-sizing: border-box; |
|
-webkit-box-sizing: border-box; |
|
box-sizing: border-box; |
|
} |
|
.btn:hover .frame { |
|
border-width: 2px; |
|
border-color: rgba(250, 250, 250, 0); |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<a href="#" class="btn"> |
|
<span class="text">Button</span> |
|
<span class="frame"></span> |
|
</a> |
|
</div> |
|
</body> |
|
</html> |
