Clean Gradient CSS Styled Buttons

///Clean Gradient CSS Styled Buttons

Clean Gradient CSS Styled Buttons

Now I take no claim on creating this CSS I want to state that first and foremost, I did however find it some time back, and I use it often enough, but I find myself going back into older projects to pull this same code out time and time again. So since I use my blog as my own personal code repository on code I use often enough, that others may get a kick out of as well. I figured I might as well put this here as well since its suiting enough. To the original author (or anyone who knows them). Please be so kind to send me a link to your site so I can pay tribute to such a nice set properly by linking back to you, its the least I can do.\r\n\r\nThing I like most about this set is not only was it diverse by having so many colors to pick from initially, but you can easily add more as you go. With that when the browsers don’t support certain CSS styling these things fail real nice, and don’t leave something to be less than desired. Well that is of course if the browser doesn’t support css at all.\r\n\r\nI think that I may end up doing though outside of this original concept is adding in an icon set and enhancing it just that much more. Taking from this original concept and making it all the more better.\r\n\r\nA couple Examples:\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
.button {\r\n	display: inline-block;\r\n	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */\r\n	*display: inline;\r\n	vertical-align: baseline;\r\n	margin: 0 2px;\r\n	outline: none;\r\n	cursor: pointer;\r\n	text-align: center;\r\n	text-decoration: none;\r\n	font: 14px/100% Arial, Helvetica, sans-serif;\r\n	padding: .5em 2em .55em;\r\n	text-shadow: 0 1px 1px rgba(0,0,0,.3);\r\n	-webkit-border-radius: .5em; \r\n	-moz-border-radius: .5em;\r\n	border-radius: .5em;\r\n	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);\r\n	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);\r\n	box-shadow: 0 1px 2px rgba(0,0,0,.2);\r\n}\r\n.button:hover {\r\n	text-decoration: none;\r\n}\r\n.button:active {\r\n	position: relative;\r\n	top: 1px;\r\n}\r\n\r\n.bigrounded {\r\n	-webkit-border-radius: 2em;\r\n	-moz-border-radius: 2em;\r\n	border-radius: 2em;\r\n}\r\n.medium {\r\n	font-size: 12px;\r\n	padding: .4em 1.5em .42em;\r\n}\r\n.small {\r\n	font-size: 11px;\r\n	padding: .2em 1em .275em;\r\n}\r\n\r\n/* color styles \r\n---------------------------------------------- */\r\n\r\n/* black */\r\n.black {\r\n	color: #d7d7d7;\r\n	border: solid 1px #333;\r\n	background: #333;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));\r\n	background: -moz-linear-gradient(top,  #666,  #000);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');\r\n}\r\n.black:hover {\r\n	background: #000;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));\r\n	background: -moz-linear-gradient(top,  #444,  #000);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');\r\n}\r\n.black:active {\r\n	color: #666;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));\r\n	background: -moz-linear-gradient(top,  #000,  #444);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');\r\n}\r\n\r\n/* gray */\r\n.gray {\r\n	color: #e9e9e9;\r\n	border: solid 1px #555;\r\n	background: #6e6e6e;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));\r\n	background: -moz-linear-gradient(top,  #888,  #575757);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');\r\n}\r\n.gray:hover {\r\n	background: #616161;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));\r\n	background: -moz-linear-gradient(top,  #757575,  #4b4b4b);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');\r\n}\r\n.gray:active {\r\n	color: #afafaf;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));\r\n	background: -moz-linear-gradient(top,  #575757,  #888);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');\r\n}\r\n\r\n/* white */\r\n.white {\r\n	color: #606060;\r\n	border: solid 1px #b7b7b7;\r\n	background: #fff;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));\r\n	background: -moz-linear-gradient(top,  #fff,  #ededed);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');\r\n}\r\n.white:hover {\r\n	background: #ededed;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));\r\n	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');\r\n}\r\n.white:active {\r\n	color: #999;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));\r\n	background: -moz-linear-gradient(top,  #ededed,  #fff);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');\r\n}\r\n\r\n/* orange */\r\n.orange {\r\n	color: #fef4e9;\r\n	border: solid 1px #da7c0c;\r\n	background: #f78d1d;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));\r\n	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');\r\n}\r\n.orange:hover {\r\n	background: #f47c20;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));\r\n	background: -moz-linear-gradient(top,  #f88e11,  #f06015);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');\r\n}\r\n.orange:active {\r\n	color: #fcd3a5;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));\r\n	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');\r\n}\r\n\r\n/* red */\r\n.red {\r\n	color: #faddde;\r\n	border: solid 1px #980c10;\r\n	background: #d81b21;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));\r\n	background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');\r\n}\r\n.red:hover {\r\n	background: #b61318;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));\r\n	background: -moz-linear-gradient(top,  #c9151b,  #a11115);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');\r\n}\r\n.red:active {\r\n	color: #de898c;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));\r\n	background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');\r\n}\r\n\r\n/* blue */\r\n.blue {\r\n	color: #d9eef7;\r\n	border: solid 1px #0076a3;\r\n	background: #0095cd;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));\r\n	background: -moz-linear-gradient(top,  #00adee,  #0078a5);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');\r\n}\r\n.blue:hover {\r\n	background: #007ead;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));\r\n	background: -moz-linear-gradient(top,  #0095cc,  #00678e);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');\r\n}\r\n.blue:active {\r\n	color: #80bed6;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));\r\n	background: -moz-linear-gradient(top,  #0078a5,  #00adee);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');\r\n}\r\n\r\n/* rosy */\r\n.rosy {\r\n	color: #fae7e9;\r\n	border: solid 1px #b73948;\r\n	background: #da5867;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));\r\n	background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');\r\n}\r\n.rosy:hover {\r\n	background: #ba4b58;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));\r\n	background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');\r\n}\r\n.rosy:active {\r\n	color: #dca4ab;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));\r\n	background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');\r\n}\r\n\r\n/* green */\r\n.green {\r\n	color: #e8f0de;\r\n	border: solid 1px #538312;\r\n	background: #64991e;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));\r\n	background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');\r\n}\r\n.green:hover {\r\n	background: #538018;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));\r\n	background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');\r\n}\r\n.green:active {\r\n	color: #a9c08c;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));\r\n	background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');\r\n}\r\n\r\n/* pink */\r\n.pink {\r\n	color: #feeef5;\r\n	border: solid 1px #d2729e;\r\n	background: #f895c2;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));\r\n	background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');\r\n}\r\n.pink:hover {\r\n	background: #d57ea5;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));\r\n	background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');\r\n}\r\n.pink:active {\r\n	color: #f3c3d9;\r\n	background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));\r\n	background: -moz-linear-gradient(top,  #f171ab,  #feb1d3);\r\n	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');\r\n}
By | 2014-01-05T10:06:50+00:00 September 5th, 2012|Code, CSS|0 Comments

About the Author:

Not much to know about me, I'm a 35+ year old coder, geek, gamer..

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: