glossy button effects

Subject:

button, .glossy-button{ font-family: helvetica, arial, sans-serif; font-size:14px; letter-spacing: 1px; text-transform: capitalize; line-height:30px; height:30px; color:#fff; cursor:pointer; display: inline-block; width:auto; text-decoration:none !important; position: static; /* these rules for the button press effect */ padding-top:1px; padding-bottom:2px; margin-top:-1px; margin-bottom:1px; padding-left:10px; padding-right:10px; margin-left:-1px; margin-right:1px; /* default background-color */ background-color: #010732; /* the mighty gradient */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.6)), color-stop(0.49, rgba(255, 255, 255, 0.3)), color-stop(0.51, rgba(255, 255, 255, 0.0)), to(rgba(255, 255, 255, 0.2))); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* Chrome10+,Safari5.1+ */ background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* FF3.6+ */ background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* Opera11.10+ */ background-image: linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* W3C */ /* some nice roundy corners */ -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; /* for links in chrome */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; /* a very subtle drop-shadow that ehances the pressed button effect */ -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.30); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.30); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.30); /* remove any inherited or default borders - especially important for the <button> element*/ border: 0 !important; /* a subtle text inset effect which will also help to enhance the pressed button effect */ text-shadow: rgba(255, 255, 255, 0.1) -1px 0, rgba(0, 0, 0, 0.3) 1px 1px; /* and of course a little animated background-color fade effect */ -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; -ms-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } /* submit and reset buttons */ input.glossy-button{ vertical-align: middle; line-height: normal !important; padding-bottom: 0; } /* remove ugly dotted border */ :focus{ outline:none; } ::-moz-focus-inner{ border:0; }

2014-08-19 11:42:33gstlouis