Skip to content

Instantly share code, notes, and snippets.

@codeboyim

codeboyim/CSS3-Beautified-Button.html

Created January 6, 2014 12:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codeboyim/8282126 to your computer and use it in GitHub Desktop.
Save codeboyim/8282126 to your computer and use it in GitHub Desktop.
Download ZIP
A styled button made purely with cool CSS3 features, e.g. multiple border-shadow, border-radius, web font, text-shadow etc. Demo: http://jsfiddle.net/codeboy/uj9JB/
Raw
CSS3-Beautified-Button.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS3-Beautified Button</title>
<style>
@import url(http://weloveiconfonts.com/api/?family=typicons);
button.beautified {
display:inline-block;
padding:10px;
border-radius:5px;
border:none;
text-align:center;
font:bold 20px Arial;
text-transform:uppercase;
margin:15px;
box-shadow:0px 1px 2px 1px hsl(0,0%,20%),
0px 0px 0px 6px hsl(0,0%,60%),
0px 0px 0px 7px hsl(0,0%,100%),
0px 0px 0px 9px hsl(0,0%,40%),
0px 5px 7px 5px hsl(0,0%,40%);
background: linear-gradient(hsl(0,0%,83%) 47%, hsl(0,0%,70%) 53%);
color:hsl(0,0%,30%);
text-shadow: 0 1px 1px white;
position:relative;
cursor:pointer;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;
}
button.beautified::before,button.beautified::after
{
content:'=';
font:normal 1.4em/1em 'Typicons';
padding:0px;
vertical-align:middle;
margin:5px 8px 0 8px;
display:inline-block;
color:hsl(0,0%,50%);
text-shadow:0 1px 1px white;
}
</style>
</head>
<body>
<button class="beautified">checkout</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment