Tag Archive for CSS

CSS3 Google Buttons

February 23, 2012 Blog 4 comments

In this tutorial, I’ll show you how to make Google buttons using CSS3. First here’s a demo:

small payday loans very cheap



The HTML

<button class="orange">Compose</button>
<button class="gray">LilJosh.com</button>
<button class="blue"><img src="search.png" /></button>

Right click and save this search icon: 

The CSS3

I’ve separated the CSS into 3 sections (for each color).

Orange

button.orange, a.orange, input[type=submit].orange {
	padding: 10px 30px;
	-webkit-border-radius: 2px 2px;
	border: solid 0px rgb(153, 153, 153);
	background: #d64937; /* Old browsers */
	background: -moz-linear-gradient(top,  #d64937 0%, #d14836 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d64937), color-stop(100%,#d14836)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d64937 0%,#d14836 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d64937 0%,#d14836 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d64937 0%,#d14836 100%); /* IE10+ */
	background: linear-gradient(top,  #d64937 0%,#d14836 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d64937', endColorstr='#d14836',GradientType=0 ); /* IE6-9 */
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	font-size:11px;
	line-height: 1;
}

button.orange:hover, a.orange:hover, input[type=submit].orange:hover {
	padding: 9px 29px;
	border: 1px solid #b0281a;
	background: #dd4b39; /* Old browsers */
	background: -moz-linear-gradient(top,  #dd4b39 0%, #c53727 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd4b39), color-stop(100%,#c53727)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #dd4b39 0%,#c53727 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #dd4b39 0%,#c53727 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #dd4b39 0%,#c53727 100%); /* IE10+ */
	background: linear-gradient(top,  #dd4b39 0%,#c53727 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4b39', endColorstr='#c53727',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 0 1px 1px #333333;
	-moz-box-shadow: 0 1px 1px #333333;
	box-shadow: 0 1px 1px #333333;
}

button.orange:active, a.orange:active, input[type=submit].orange:active {
	padding: 9px 29px;
    border: 1px solid #b0281a;
    -webkit-box-shadow: inset 0 0 8px 4px rgb(197, 55, 39), 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 8px 4px rgb(197, 55, 39), 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 8px 4px rgb(197, 55, 39), 0 1px 0 0 #eeeeee; 
}

Gray

button.gray, a.gray, input[type=submit].gray {
	padding: 10px 10px;
	-webkit-border-radius: 2px 2px;
	border: solid 1px #dadada;
	background: #f4f4f4; /* Old browsers */
	background: -moz-linear-gradient(top,  #f4f4f4 0%, #f1f1f1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f4f4f4 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f4f4f4 0%,#f1f1f1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f4f4f4 0%,#f1f1f1 100%); /* IE10+ */
	background: linear-gradient(top,  #f4f4f4 0%,#f1f1f1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-9 */
	color: #555;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	text-shadow: 0px 1px 1px rgba(255,255,255,1);
	line-height: 1;
	font-size:11px;
}

.gray:hover { 
	border:1px solid #c6c6c4; 
	background: background: #f8f8f8; /* Old browsers */
	background: -moz-linear-gradient(top,  #f8f8f8 0%, #f1f1f1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f8f8f8 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f8f8f8 0%,#f1f1f1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f8f8f8 0%,#f1f1f1 100%); /* IE10+ */
	background: linear-gradient(top,  #f8f8f8 0%,#f1f1f1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-9 */
	color: #222; 
	-webkit-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4);
	-moz-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4);
	box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4);
}
		
.gray:active { 
	border:1px solid #c6c6c4; 
	color: #222;
	-webkit-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee;
	-moz-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee;
	box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee;
}

Blue

button.blue, a.blue, input[type=submit].blue {
	padding: 10px 30px;
	-webkit-border-radius: 2px 2px;
	border: solid 1px #3079ed;
	background: #4d90fe; /* Old browsers */
	background: -moz-linear-gradient(top,  #4d90fe 0%, #4787ed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* IE10+ */
	background: linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d90fe', endColorstr='#4787ed',GradientType=0 ); /* IE6-9 */
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	font-size:11px;
	line-height: 1;
}

button.blue:hover, a.blue:hover, input[type=submit].blue:hover {
	border: 1px solid #2f5bb7;
	background: #4d90fe; /* Old browsers */
	background: -moz-linear-gradient(top,  #4d90fe 0%, #357ae8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* IE10+ */
	background: linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d90fe', endColorstr='#357ae8',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 0 1px 1px #333333;
	-moz-box-shadow: 0 1px 1px #333333;
	box-shadow: 0 1px 1px #333333;
}

button.blue:active, a.blue:active, input[type=submit].blue:active {
	border: 1px solid #377cea;
	-webkit-box-shadow: inset 0 0 2px 2px #377cea, 0 1px 0 0 #aaa;
	-moz-box-shadow: inset 0 0 2px 2px #377cea, 0 1px 0 0 #aaa;
	box-shadow: inset 0 0 2px 2px #377cea, 0 1px 0 0 #aaa;
}

If you like this tutorial please show me some love! Thank you. :]

Share on Twitter

CSS Reset – Because Some Browsers Suck

February 14, 2012 Blog One comment

I was recently reading an article on smashingmagazing.com and came across something I have to share. I always knew CSS Resets were used, but never understood why. From the article I was reading he says this:

“Browsers have different default styles for the elements we’ll be using, so understanding this and getting all of the elements to look the same is important.”

“You can either deal with these individually or, if you’re project will include more than just this navigation, use a reset to clear all of the styles and start fresh.”

You can download CSS Reset code here: http://meyerweb.com/eric/tools/css/reset/

Share on Twitter