I have been working on a new UI at work and decided to go full on with it in HTML5 and CSS3 because its 98% for internal company users who all use a “modern browser” and I don’t have to worry about those pesky IE users. The following code is for a cool looking glow highlight button which involves multiple backgrounds with rgba color. I have included three states: normal, hover, and active.
Enjoy!
<button id="css3-button" type="button">Cool Arse Button</button>
<style>
button#css3-button{
padding: 0.4em 1em 0.4em 1em;
font-family:Helvetica, Arial, sans-serif;
font-size:1.1em;
color: #2885ab;
letter-spacing:-0.05em;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4), 0px 0px 6px rgba(0, 0, 0, 0.2);
font-weight:bold;
cursor:pointer;
border:1px solid #FFFFFF;
-moz-border-radius: 0.7em;
-webkit-border-radius: 0.7em;
border-radius: 0.7em;
background: -moz-linear-gradient(left, rgba(131, 182, 202, 0.8), rgba(131, 182, 202, 0.2) 15%, rgba(131, 182, 202, 0) 50%, rgba(131, 182, 202, 0.2) 85%, rgba(131, 182, 202, 0.8)),
-moz-linear-gradient(top, #e2f4fb, #b5d4e0 50%, #b5d4e0 50%, #91bfd1);
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(131, 182, 202, 0.8)), to(rgba(131, 182, 202, 0.8)), color-stop(.15, rgba(131, 182, 202, 0.2)), color-stop(.5, rgba(131, 182, 202, 0)), color-stop(.85, rgba(131, 182, 202, 0.2))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#e2f4fb), to(#91bfd1), color-stop(.5, #b5d4e0), color-stop(.5, #b5d4e0));
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
}
button#css3-button:hover{
color:#01678F;
background: -moz-linear-gradient(left, rgba(131, 182, 202, 0.8), rgba(131, 182, 202, 0.2) 15%, rgba(131, 182, 202, 0) 50%, rgba(131, 182, 202, 0.2) 85%, rgba(131, 182, 202, 0.8)),
-moz-linear-gradient(top, #f7f7f7, #e2f4fb 50%, #e2f4fb 50%, #91bfd1);
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(131, 182, 202, 0.8)), to(rgba(131, 182, 202, 0.8)), color-stop(.15, rgba(131, 182, 202, 0.2)), color-stop(.5, rgba(131, 182, 202, 0)), color-stop(.85, rgba(131, 182, 202, 0.2))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f7f7f7), to(#91bfd1), color-stop(.5, #e2f4fb), color-stop(.5, #e2f4fb));
}
button#css3-button:active{
color:#6EAAC2;
border-color: #999999 #f1f1f1 #f1f1f1 #aaaaaa;
background: -moz-linear-gradient(top, #f1f1f1, #dddddd);
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#dddddd));
}
</style> |