Pure CSS3 Message Button with Notification
30 Jul 2011 04:25
This is a Pure CSS3 message button with another CSS3 notification. This is wonderful for custom profiled websites that want to achieve a better user interface. This works in Most Browsers.
The CSS:
/* - Designed by Matt Gentile Creator of Icondeposit.com */ a {font-family: Tahoma; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);} .notifications {margin:0; position: relative; width: auto; height: auto; padding: 0; overflow: visible; left: 157px; top: 137px;} .notifications > .new-message a {font-size: 9px; font-weight: bold; text-decoration: none; margin: 0; position: absolute; padding: 1px 3px; height: auto; width: auto; top: -8px; left: 74px; color: #f5f5f5; background: #cc0000; background: -moz-linear-gradient(top,#dd0000 0,#cc0000,100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#dd0000),color-stop(100%,#cc0000)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd0000',endColorstr='#cc0000',GradientType=0); border-radius: 60px; -webkit-border-radius: 60px; -moz-border-radius: 60px; -o-border-radius: 60px; border: 1px solid rgba(0,0,0,0.50); box-shadow: 0px 1px 3px rgba(0,0,0,0.35), inset 0px 1px 1px rgba(255,255,255,0.50); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.35), inset 0px 1px 1px rgba(255,255,255,0.50); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.35), inset 0px 1px 1px rgba(255,255,255,0.50); -o-box-shadow: 0px 1px 3px rgba(0,0,0,0.35), inset 0px 1px 1px rgba(255,255,255,0.50); z-index: 1;} .notifications > .messages a {font-size: 12px; font-weight: bold; text-decoration: none; margin: 0; position: relative; padding: 4px 11px 5px 11px; height: auto; width: auto; color: #f5f5f5; background: #666; background: -moz-linear-gradient(top,#7b7b7b 0,#666,100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#7b7b7b),color-stop(100%,#666)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7b7b7b',endColorstr='#666',GradientType=0); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border: 1px solid rgba(0,0,0,0.50); box-shadow: 0px 1px 3px rgba(0,0,0,0.35), inset 0px 1px 0px rgba(255,255,255,0.205656); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.35), inset 0px 1px 0px rgba(255,255,255,0.205656); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.35), inset 0px 1px 0px rgba(255,255,255,0.205656); -o-box-shadow: 0px 1px 3px rgba(0,0,0,0.35), inset 0px 1px 0px rgba(255,255,255,0.205656);} .notifications > .messages a:hover {color: #fff; background: #8b8b8b; background: -moz-linear-gradient(top,#8b8b8b 0,#666,100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#8b8b8b),color-stop(100%,#666)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8b8b8b',endColorstr='#666',GradientType=0); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border: 1px solid rgba(0,0,0,0.50); box-shadow: 0px 1px 3px rgba(0,0,0,0.35), inset 0px 1px 0px rgba(255,255,255,0.205656); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.35), inset 0px 1px 0px rgba(255,255,255,0.205656); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.35), inset 0px 1px 0px rgba(255,255,255,0.205656); -o-box-shadow: 0px 1px 3px rgba(0,0,0,0.35), inset 0px 1px 0px rgba(255,255,255,0.205656);} .notifications > .messages a:active {background: #555; background: -moz-linear-gradient(top,#666 0,#7b7b7b,100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#666),color-stop(100%,#7b7b7b)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666',endColorstr='#7b7b7b',GradientType=0); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border: 1px solid rgba(0,0,0,0.50); box-shadow: 0px 0px 0px rgba(0,0,0,0.35), inset 0px 1px 0px rgba(255,255,255,0.205656); -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.35), inset 0px 1px 0px rgba(255,255,255,0.205656); -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0.35), inset 0px 1px 0px rgba(255,255,255,0.205656); -o-box-shadow: 0px 0px 0px rgba(0,0,0,0.35), inset 0px 1px 0px rgba(255,255,255,0.205656);}
The HTML:
<div class="notifications"> <div class="new-message"> <a href="#" target="_top">6</a> </div> <div class="messages"> <a href="#" target="_top">Messages</a> </div> </div>
If used elsewhere, remember to link back to Icondeposit.com or this post.
View the Demo: http://jsfiddle.net/LnJpQ/
Original URL: http://www.icondeposit.com/code:pure-css3-message-button-with-notification
License Info: Creative Commons Attribution 3.0
absolutely fantastic button i G+1 it.
one tiny suggestion.
right: -5px;
instead of left:74px;
on new-messages