Skip to content

Instantly share code, notes, and snippets.

@james2doyle
Created August 27, 2012 18:19
Show Gist options
  • Save james2doyle/3491041 to your computer and use it in GitHub Desktop.
Save james2doyle/3491041 to your computer and use it in GitHub Desktop.
faded buttons
/**
* faded buttons
*/
body {
background: #555;
font-family: Arial;
color: white;
font-size: 30px;
text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
a {
color: white;
}
.close, .check {
text-decoration: none;
display: block;
margin: 0 0 0 20px;
float: left;
width: 60px;
height: 60px;
padding: 10px 20px;
border-radius: 3px;
box-sizing: border-box;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7),
inset 0 -1px 0 rgba(255,255,255,0.2),
0 1px 5px rgba(0,0,0,0.3);
}
.close {
font-weight: bold;
border: 1px solid #551815;
background: url(https://dl.dropbox.com/u/6913105/noise01.png), -moz-linear-gradient(top, #e4a190 0%, #d77874 100%); /* FF3.6+ */
background: url(https://dl.dropbox.com/u/6913105/noise01.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4a190), color-stop(100%,#d77874)); /* Chrome,Safari4+ */
background: url(https://dl.dropbox.com/u/6913105/noise01.png), -webkit-linear-gradient(top, #e4a190 0%,#d77874 100%); /* Chrome10+,Safari5.1+ */
background: url(https://dl.dropbox.com/u/6913105/noise01.png), -o-linear-gradient(top, #e4a190 0%,#d77874 100%); /* Opera 11.10+ */
background: url(https://dl.dropbox.com/u/6913105/noise01.png), -ms-linear-gradient(top, #e4a190 0%,#d77874 100%); /* IE10+ */
background: url(https://dl.dropbox.com/u/6913105/noise01.png), linear-gradient(to bottom, #e4a190 0%,#d77874 100%); /* W3C */
}
.check {
font-weight: 300;
border: 1px solid #00364E;
background: url(https://dl.dropbox.com/u/6913105/noise01.png), -moz-linear-gradient(top, #82c8d0 0%, #3b9ebb 100%); /* FF3.6+ */
background: url(https://dl.dropbox.com/u/6913105/noise01.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82c8d0), color-stop(100%,#3b9ebb)); /* Chrome,Safari4+ */
background: url(https://dl.dropbox.com/u/6913105/noise01.png), -webkit-linear-gradient(top, #82c8d0 0%,#3b9ebb 100%); /* Chrome10+,Safari5.1+ */
background: url(https://dl.dropbox.com/u/6913105/noise01.png), -o-linear-gradient(top, #82c8d0 0%,#3b9ebb 100%); /* Opera 11.10+ */
background: url(https://dl.dropbox.com/u/6913105/noise01.png), -ms-linear-gradient(top, #82c8d0 0%,#3b9ebb 100%); /* IE10+ */
background: url(https://dl.dropbox.com/u/6913105/noise01.png), linear-gradient(to bottom, #82c8d0 0%,#3b9ebb 100%); /* W3C */
}
<a class="close" href="#">x</a>
<a class="check" href="#">&#10004;</a>
{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment