Based on http://tympanus.net/Development/CreativeButtons/ but upgraded to support not transparent background color.
A Pen by Osvalds Neiders on CodePen.
<div> | |
<a href="http://turn.lv" class="button">Made with ♡ by Turn</a> | |
</div> |
@import "bourbon"; | |
@import "neat"; | |
@import url(https://fonts.googleapis.com/css?family=Open+Sans); | |
* { | |
font-family: "Open Sans", sans-serif; | |
} | |
div { | |
position: absolute; | |
left: 50%; | |
top:50%; | |
transform: translate(-50%, -50%); | |
} | |
.button{ | |
background: none; | |
text-decoration: none; | |
display: inline-block; | |
color: #fff; | |
font-size: em(24); | |
line-height: 1.2; | |
padding: em(9, 24) em(24,24); | |
border-radius: em(30, 24); | |
min-width: em(30, 24); | |
text-align: center; | |
font-weight: normal; | |
border: none; | |
position: relative; | |
vertical-align: middle; | |
z-index: 3; | |
overflow: hidden; | |
&:before{ | |
border-radius: em(30, 24); | |
content: ""; | |
position: absolute; | |
z-index: -2; | |
transition: all 0.3s; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
left: 0; | |
background: linear-gradient(to right, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* W3C */ | |
} | |
&:after{ | |
border-radius: em(30, 24); | |
content: ""; | |
position: absolute; | |
z-index: -1; | |
transition: all 0.3s; | |
width: 0; | |
height: 100%; | |
top: 0; | |
left: 0; | |
background: linear-gradient(to right, rgba(35,83,138,1) 0%,rgba(167,207,223,1) 100%); /* W3C */ | |
} | |
&:hover, &:active, &:focus { | |
cursor: pointer; | |
&:after{ | |
width: 100%; | |
} | |
} | |
} |