public
Created

Button

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
/* 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%);
}
dabblet.html
HTML
1 2 3
<div class="wrap">
<a href="#" class="button">click me!</a>
</div><!--/wrap-->
settings.json
JSON
1
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.