An attempt to reproduce polymer paper-button with css
Created
August 8, 2014 00:19
-
-
Save g-dormoy/c354949bd5c644cbb169 to your computer and use it in GitHub Desktop.
A Pen by Guillaume.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class='fern-button'> | |
<button id='fern-button'> | |
</button> | |
<!-- The for html5 selector is used to to correspond with the input --> | |
<label class='fern-button-label' for='fern-check'> | |
<span class='fern-button-loader'></span> | |
<p>hit me!</p> | |
</label> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.fern-button { | |
width: 150px; | |
margin: 30px auto; | |
position: relative; | |
} | |
.fern-button button { | |
display: none; | |
} | |
/* Nothing fancy here */ | |
.fern-button .fern-button-label { | |
position: absolute; | |
cursor: pointer; | |
display: block; | |
height: 30px; | |
width: 150px; | |
background-color: #EEEEEE; | |
border-radius: 5px; | |
font-size: 16px; | |
box-shadow: 0px 1px 5px 0px #555555; | |
transition: linear 0.2s; | |
z-index: 3; | |
} | |
.fern-button .fern-button-loader { | |
position: absolute; | |
display: block; | |
border-radius: 5px; | |
height: 30px; | |
width: 0px; | |
transition: linear 0.2s; | |
border-radius: 5px; | |
z-index: 4; | |
} | |
/* text centered via the tanslate and the positionning */ | |
.fern-button .fern-button-label p { | |
position: absolute; | |
display: block; | |
z-index: 5; | |
top: -50%; | |
left: 50%; | |
transform: translateY(25%) translateX(-50%); | |
} | |
.fern-button .fern-button-label:active { | |
box-shadow: 0px 3px 15px 0px #555555; | |
} | |
/* z-index have ton be lower the p one */ | |
.fern-button .fern-button-label:active .fern-button-loader { | |
background-color: #E2E2E2; | |
width: 150px; | |
z-index: 4; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment