Skip to content

@dreggoth /dabblet.css
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Button
/* Button */
html {
font-size: 16px;
}
body {
font-size: 62.5%;
}
.wrap {
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -75px;
}
.button {
text-decoration: none; /* Case of links */
cursor: pointer; /* Case not link */
text-transform: capitalize; /* Make it capt */
color: #1d1d1d; /* Not so dark */
padding: 10px 15px;
height: 23px;
font-size: 2em;
width: 150px; /* Just to make it look nice */
display: inline-block;
border: 1px solid #9d9d9d;
box-shadow: 0 0 1px #2d2d2d;
border-radius: 4px;
text-align: center;
position: relative;
text-shadow: 0 -1px 0 #9d9d9d;
transition: all 0.2s linear;
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
font-family: Helvetica, Arial, Sans-Serif;
}
.button:hover,.button:focus {
bottom: 10px;
box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.button:active {
background: linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%);
}
<div class="wrap">
<a href="#" class="button">click me!</a>
</div><!--/wrap-->
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.