multi size button /w gradient.png
/* start of css button styles */
.button {
color: #fff;
text-decoration:none;
font-weight: bold;
padding: 5px 10px;
display: inline;
border-style:solid;
border-width:2px;
border-radius: 6px;
-o-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-image: url('../img/button-gradient.png');
}
.button.small { font-size:14px }
.button.medium { font-size:18px; }
.button.large { font-size:24px; }
.button.giant { font-size:30px; }
.button.enormous { font-size:40px; }
.button.red { background-color: #FF0000; border-color: #e50000; }
.button.purple { background-color: #9400bf; border-color: #8200AA; }
.button.green { background-color: #58aa00; border-color: #519900; }
.button.orange { background-color: #FF6F02; border-color: #ED6402; }
.button.blue { background-color: #2c6da0; border-color: #245982; }
.button.yellow { background-color: #FFC300; border-color: #ED9F04; color: #000000 }
.button.black { background-color: #333333; border-color: #000000; }
.button.white { background-color: #FFFFFF; border-color: #8C8C8C; color: #000000; }
.button.bing { background-color: #0044CC; border-color: #245982; }
.button:hover { color:yellow; }
.button.red:hover { background-color: #e50000; }
.button.purple:hover { background-color: #8200AA; }
.button.green:hover { background-color: #519900; }
.button.orange:hover { background-color: #ED6402; }
.button.blue:hover { background-color: #245982; }
.button.yellow:hover { background-color: #ED9F04; }
.button.black:hover { background-color: #000000; }
.button.white:hover { background-color: #F7F7F7; color:#196DFF; }
.button.bing:hover { background-color: #FFFFFF; border-color: #0044CC; color:#0044CC;}
.button:active { position: relative; top: 1px; }
/* end of css button styles */
<!-- head meta tag is needed for rounded corners on ie -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<a href='link.php' class='large button red'>Click Here</a>