Create buttons using CSS3 gradients and border properties.
CSS3
BASIC HTML & CSS
<html>
<head>
<title>thewwwdesigners</title>
<style>
body {
font: 14px Georgia, serif;
background: #e8e8e8;
}
#page-wrap {
width: 960px;
margin: 80px auto;
text-align: center;
}
.button {
border: 1px solid #DDD;
border-radius: 3px;
text-shadow: 0 1px 1px white;
-webkit-box-shadow:0 1px 1px #fff;
-moz-box-shadow:0 1px 1px #fff;
box-shadow:0 1px 1px #fff;
font: bold 11px Sans-Serif;
padding: 6px 10px;
white-space: nowrap;
vertical-align: middle;
color: #666;
background: transparent;
cursor: pointer;
}
.button:hover, .button:focus {
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
border: 1px solid #AAA;
border-bottom-color: #CCC;
border-top-color: #999;
-webkit-box-shadow: inset 0 1px 2px #aaa;
-moz-box-shadow: inset 0 1px 2px #aaa;
box-shadow: inset 0 1px 2px #aaa;
background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
background: -moz-linear-gradient(top, #E6E6E6, gainsboro);
background: -ms-linear-gradient(top, #E6E6E6, gainsboro);
background: -o-linear-gradient(top, #E6E6E6, gainsboro);
}
.button:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid #999;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
margin: 0 0 0 4px;
position: relative;
top: -1px;
}
.button:hover:after {
border-top-color: black;
}
</style>
</head>
<body>
<div id="page-wrap">
<button class="button">
English
</button>
</div>
</body>
</html>
<head>
<title>thewwwdesigners</title>
<style>
body {
font: 14px Georgia, serif;
background: #e8e8e8;
}
#page-wrap {
width: 960px;
margin: 80px auto;
text-align: center;
}
.button {
border: 1px solid #DDD;
border-radius: 3px;
text-shadow: 0 1px 1px white;
-webkit-box-shadow:0 1px 1px #fff;
-moz-box-shadow:0 1px 1px #fff;
box-shadow:0 1px 1px #fff;
font: bold 11px Sans-Serif;
padding: 6px 10px;
white-space: nowrap;
vertical-align: middle;
color: #666;
background: transparent;
cursor: pointer;
}
.button:hover, .button:focus {
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
border: 1px solid #AAA;
border-bottom-color: #CCC;
border-top-color: #999;
-webkit-box-shadow: inset 0 1px 2px #aaa;
-moz-box-shadow: inset 0 1px 2px #aaa;
box-shadow: inset 0 1px 2px #aaa;
background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
background: -moz-linear-gradient(top, #E6E6E6, gainsboro);
background: -ms-linear-gradient(top, #E6E6E6, gainsboro);
background: -o-linear-gradient(top, #E6E6E6, gainsboro);
}
.button:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid #999;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
margin: 0 0 0 4px;
position: relative;
top: -1px;
}
.button:hover:after {
border-top-color: black;
}
</style>
</head>
<body>
<div id="page-wrap">
<button class="button">
English
</button>
</div>
</body>
</html>
