Pure CSS3 Message Button with Notification

Rating: 7
Comments: 1

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

rating: +7+x

Add a New Comment
Copyright © 2011-2015 Icon Deposit - All rights Reserved