Google Plus UI Button制作

Google+的“button”效果一直都吸引了我，早就想亲手去体会一下这样的感觉，但一直给自己找借口，直到最近几天，终于动手一试了，试后才知道，他们做的真NB。Google+的UI Buttons形成了一个制作“按钮”、“图标按钮”、“带有标签的图标按钮”、“下拉按钮”、“tip按钮”等按钮的工具或者说UI Buttons框架，使用这一套“UI Button”将会给你的工作带来极大的速度与视觉冲击效果。

那么我们今天的目的就是来看看Google+的攻城师是怎么写的这个代码。因为只有通过代码，我们才能知道其中的原理与制作过程。

HTML Markup:

老样子，首先就需要他的HTML Markup是怎么写的，因为我们在实际应用中这一块是不可缺少的，如果没有这一块，你就无法继续下去，俗话说得好“巧妇难为无米之炊”。下面我们不说别的，直接上代码才是王道：

			<a href="#" class="button"><span class="label">Button</span></a>
			<button><span class="label">Button</span></button>
		

上面的代码是用于单个按钮的，不过我们有时需要几个代码在同一行，类似于菜单的效果，那么最好在外面加上一个包裹容器：

			<div class="buttons">
			  <a class="button" href="#"><span class="label">button</span></a>
			  <a class="button" href="#"><span class="label">button</span></a>
			</div>
		

这样写的好处是：“对于单个Button并看不出其好处，但对于多个处于同一行的Button效果来说，加上这个“div.buttons”容器就很有必要了。我们可以在这个元素上进行浮动的清除，当然你也可以在这个元素上加上一个“clearfix”类名”。

			.buttons {
					/* Style as you wish (toolbar)*/
			 }
			 .buttons:before,
			 .buttons:after {
					content:"";
					display: table;
			 }
			 .buttons:after {
					clear: both;
			 }
			 .buttons {
					zoom:1;
			 }
		

上面我采用的是直接在“.buttons”上清除浮动，没有增加任何标签或者属性值。有关于清除浮动的方法有多种，如果您想了解这方面的知识点，不仿点击《Clear Float》进去看看。

那么说了这么多，我个人强烈建议“不管是单个按钮或者多个按钮，最好都给“button”加上这个“div.buttons”容器”。

			<div class="buttons"><a href="#" class="button"><span class="label">Button</span></a></div>
		

或者：

			<div class="buttons">
			  <a href="#" class="button left"><span class="label">Left Button</span></a>
			  <a href="#" class="button middle"><span class="label">Middle Button</span></a>
			  <a href="#" class="button right"><span class="label">Right Button</span></a>
			</div>
		

上面的结构是我们制作“基本按钮”的一个HTML Markup，但对于后面的“下接按钮”和“TIP按钮”，我们到时还是需要做出一定的修改，详细的可以留意后面的变化，在没有进行另外的说明，都将是以这种“HTML Markup”来制作“Button”。

前面主要介绍了制作“Button”的“HTML Markup”，下面主要来其样式。样式我主要以这样的方式来给大家呈现：首先是“HTML Markup”，接着是“CSS Code”，最后在给大家一个对应的效果图。首先将“Google+的UI Button”分成以下几类：

1. 基本按钮
2. ON Button
3. 动作按钮
4. 颜色按钮
5. Inline Button
6. Negative and postion Buttons
7. 图标按钮
8. Tip按钮
9. 有标签的图标按钮
10. 下接菜单按钮

一、基本按钮

HTML Markup

			<div class="buttons">
			  <button>
			    <span class="label">Button</span>
			  </button>
			</div>
			<!-- ======OR======== -->
			<div class="buttons">
			  <a class="button">
			    <span class="label">Button</span>
			  </a>
			</div>
		

CSS Code

			/*Default style*/
			button,
			.button {
				text-decoration: none;
				text-shadow: 0 1px 0 #fff;
				
				font: bold 11px Helvetica, Arial, sans-serif;
				color: #444;
				line-height: 17px;
				height: 18px;
				
				display: inline-block;
				float: left;
				
				margin: 5px;
				padding: 5px 6px 4px 6px;
				
				background: #F3F3F3;
				border: solid 1px #D9D9D9;
				
				-webkit-border-radius: 2px;
				-moz-border-radius: 2px;
				border-radius: 2px;
				
				-webkit-transition: border-color .20s;
				-moz-transition: border-color .20s;
				-o-transition: border-color .20s;
				transition: border-color .20s;
			}
			button {
				height: 29px !important;
				cursor: pointer;
			}
			/*Suspended state style (:hover)*/
			button:hover,
			.button:hover {
				background: #F4F4F4;
				border-color: #C0C0C0;
				color: #333;
				text-decoration: none;
			}	

			/*Click on the state effect(:active)*/
			button:active, 
			.button:active {
				border-color: #4D90FE;
				color: #4D90FE;
				
				-moz-box-shadow:inset 0 0 10px #D4D4D4;
				-webkit-box-shadow:inset 0 0 10px #D4D4D4;
				box-shadow:inset 0 0 10px #D4D4D4;
			}
			/*label style*/
			.ddm span.label, 
			button span.label, 
			.button span.label {
				display: inline-block;
				float: left;
				line-height: 17px;
				height: 18px;
				padding: 0 1px;
				overflow: hidden;
				color: #444;
				
				-webkit-transition: color .20s;
				-moz-transition: color .20s;
				-o-transition: color .20s;
				transition: color .20s;
			} 
			button span.label {
				line-height: 15px !important;
			}
			.ddm:active span.label, 
			button:active span.label, 
			.button:active span.label {
					color: #4D90FE;
			}

			button:hover .label, 
			.button:hover .label {
					color: #333;
			}

			button:hover .label.red, 
			.button:hover .label.red {
					color: #DB4A37;
			}
			button:hover .label.blue, 
			.button:hover .label.blue {
					color: #7090C8;
			}
			button:hover .label.green, 
			.button:hover .label.green {
					color: #42B449;
			}
			button:hover .label.yellow, 
			.button:hover .label.yellow {
					color: #F7CB38;
			}

			button.blue .label, 
			.button.blue .label {
				color: #FFF !important;
				text-shadow: 0 1px 0 #2F5BB7 !important;
			}
			button.green .label, 
			.button.green .label {
				color: #FFF !important;
				text-shadow: 0 1px 0 #2D6200 !important;
			}
			button.red .label, 
			.button.red .label {
				color: #FFF !important;
				text-shadow: 0 1px 0 #B0281A !important;
			}
			button.action .label, 
			.button.action .label {
				padding: 0 17px !important;
			}

			button.action:active .label, 
			.button.action:active .label {
				color: #333 !important;
			}

			button.blue:active .label, 
			button.green:active .label, 
			button.red:active .label, 
			.button.blue:active .label, 
			.button.green:active .label, 
			.button.red:active .label {
				color: #FFF !important;
			}
		

效果

这个效果可以说是整个Google+的默认按钮效果。接下来我们一起来看第二种。

二、ON Button

这个效果只是在前面的默认按钮效果上做了一定的修改，这个修改也是很简单的，首先在“button”的HTML标签上增加一个“on”类名，然后样多在“.on”上增加一些别的样式效果，具体看代码吧：

HTML Markup

			<div class="buttons">
			  <button class="on">
			    <span class="label">On Button</span>
			  </button>
			</div>
			<!-- ====	OR  ==== -->
			<div class="buttons">
			  <a class="button on">
			    <span class="label">On Button</span>
			  </a>
			</div>
		

CSS Code

			button.on, 
			.button.on {
				border-color: #BBB;
				
				-moz-box-shadow:inset 0 0 10px #D4D4D4;
				-webkit-box-shadow:inset 0 0 10px #D4D4D4;
				box-shadow:inset 0 0 10px #D4D4D4;
			}
			button.on:hover, 
			.button.on:hover {
				border-color: #BBB;
				
				-moz-box-shadow:inset 0 0 10px #D4D4D4;
				-webkit-box-shadow:inset 0 0 10px #D4D4D4;
				box-shadow:inset 0 0 10px #D4D4D4;
			}
			button.on:active, 
			.button.on:active {
				border-color: #4D90FE;
			}
		

效果

三、动作按钮

动作按钮制作方法和“ON Button”是一样的，只需要在“button”上加上一个“.action”类名，其html代码和上面的“on button”是一样的，只不过把“on”换成了“action”。所以我们直接来看CSS代码的变化.

CSS Code

			button.action, 
			.button.action {
				border: 1px solid #D8D8D8 !important;
				
				background: #F2F2F2;
				background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
				background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1);
				background: -ms-linear-gradient(top, #F5F5F5, #F1F1F1);
				background: -o-linear-gradient(top, #F5F5F5, #F1F1F1);
				
				-webkit-transition: border .20s;
				-moz-transition: border .20s;
				-o-transition: border .20s;
				transition: border .20s;
			}
			button.action:hover, 
			.button.action:hover {
				border: 1px solid #C6C6C6 !important;
				
				background: #F3F3F3;
				background: -webkit-linear-gradient(top, #F8F8F8, #F1F1F1);
				background: -moz-linear-gradient(top, #F8F8F8, #F1F1F1);
				background: -ms-linear-gradient(top, #F8F8F8, #F1F1F1);
				background: -o-linear-gradient(top, #F8F8F8, #F1F1F1);

				-moz-box-shadow: 0 1px 0px #DDD;
				-webkit-box-shadow: 0 1px 0px #DDD;
				box-shadow:iset 0 1px 0px #DDD;
			}
			button.action:active, 
			.button.action:active {
				-moz-box-shadow: none !important;
				-webkit-box-shadow: none !important;
				box-shadow: none !important;
				border-color: #C6C6C6 !important;
			}
		

效果

四、颜色按钮

这里只提供了几种颜色按钮的制作，当然大家可以按照这样的思路自己去配置更多的色彩颜色按钮库。其结构也没有多大的变化，只是在“.button”上增加一个“colorName”的类名，当然这个“colorName”是所指你需要的颜色的名称，他可以是“red,blue,green”等等。接下来只需改变相应的样式。

CSS Code

			/*Blue Button*/
			button.blue, 
			.button.blue {
				border: 1px solid #3079ED !important;
				
				background: #4B8DF8;
				background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);
				background: -moz-linear-gradient(top, #4C8FFD, #4787ED);
				background: -ms-linear-gradient(top, #4C8FFD, #4787ED);
				background: -o-linear-gradient(top, #4C8FFD, #4787ED);
				
				-webkit-transition: border .20s;
				-moz-transition: border .20s;
				-o-transition: border .20s;
				transition: border .20s;
			}
			button.blue:hover, 
			.button.blue:hover {
				border: 1px solid #2F5BB7 !important;
				
				background: #3F83F1;
				background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
				background: -moz-linear-gradient(top, #4D90FE, #357AE8);
				background: -ms-linear-gradient(top, #4D90FE, #357AE8);
				background: -o-linear-gradient(top, #4D90FE, #357AE8);
			}
			button.blue:active, 
			.button.blue:active {
				border-color: #2F5BB7 !important;
			}

			/*green button*/
			button.green, 
			.button.green {
				border: 1px solid #29691D !important;
				
				background: #3A8E00;
				background: -webkit-linear-gradient(top, #3C9300, #398A00);
				background: -moz-linear-gradient(top, #3C9300, #398A00);
				background: -ms-linear-gradient(top, #3C9300, #398A00);
				background: -o-linear-gradient(top, #3C9300, #398A00);
				
				-webkit-transition: border .20s;
				-moz-transition: border .20s;
				-o-transition: border .20s;
				transition: border .20s;
			}
			button.green:hover, 
			.button.green:hover {
				border: 1px solid #2D6200 !important;
				
				background: #3F83F1;
				background: -webkit-linear-gradient(top, #3C9300, #368200);
				background: -moz-linear-gradient(top, #3C9300, #368200);
				background: -ms-linear-gradient(top, #3C9300, #368200);
				background: -o-linear-gradient(top, #3C9300, #368200);
			}
			button.green:active, 
			.button.green:active {
				border-color: #2D6200 !important;
			}

			/*red button*/
			button.red, 
			.button.red {
				border: 1px solid #D14836 !important;
				
				background: #D64937;
				background: -webkit-linear-gradient(top, #DC4A38, #D14836);
				background: -moz-linear-gradient(top, #DC4A38, #D14836);
				background: -ms-linear-gradient(top, #DC4A38, #D14836);
				background: -o-linear-gradient(top, #DC4A38, #D14836);
				
				-webkit-transition: border .20s;
				-moz-transition: border .20s;
				-o-transition: border .20s;
				transition: border .20s;
			}
			button.red:hover, 
			.button.red:hover {
				border: 1px solid #B0281A !important;
				
				background: #D14130;
				background: -webkit-linear-gradient(top, #DC4A38, #C53727);
				background: -moz-linear-gradient(top, #DC4A38, #C53727);
				background: -ms-linear-gradient(top, #DC4A38, #C53727);
				background: -o-linear-gradient(top, #DC4A38, #C53727);
			}
			button.red:active, 
			.button.red:active {
				border-color: #B0281A !important;
			}
		

这里只写了几种颜色按钮的风格，大家要是对色彩有一定的了解，你可以按您自己想要的风格去写，另外这个色彩按钮一般都是配合“动作按钮”一起使用。只要在上面的样式基础上，改变一下HTML标签：

			<div class="buttons">
			  <a href="#" class="button red action"><span class="label">Upload</span></a>
			</div>
		

注：代码中的“red”类名就是所指的“colorName”，你可以根据需要换成你自己想的类名。当然写上相应的样式代码。

效果

五、Inline Button

这个效果是将“Buttons”以一行的风格显示，有点类似是横向菜单的效果。此处将其分为“left”、“middle”和“right”，需要注意的一点就是“left”和“right”将圆角效果去除一边，而“middle”的圆角效果全部清除。

HTML Markup

			<div class="buttons">
			  <a href="#" class="button left"><span class="label">Left</span></a>
			  <a href="#" class="button middle"><span class="label">Middle</span></a>
			  <a href="#" class="button right"><span class="label">right</span></a>
			</div>
		

CSS Code

			button.left, 
			.button.left {
				margin: 5px 0 5px 5px;
				
				border-top-right-radius: 0;
				-webkit-border-top-right-radius: 0;
				-moz-border-radius-topright: 0;
				
				border-bottom-right-radius: 0;
				-webkit-border-bottom-right-radius: 0;
				-moz-border-radius-bottomright: 0;
			}

			button.middle, 
			.button.middle {
				margin: 5px 0;
				
				border-left-color: #F4F4F4;
				
				border-radius: 0;
				-webkit-border-radius: 0;
				-moz-border-radius: 0;
			}
			button.right, 
			.button.right {
				margin: 5px 5px 5px 0;
				
				border-left-color: #F4F4F4;
				
				border-top-left-radius: 0;
				-webkit-border-top-left-radius: 0;
				-moz-border-radius-topleft: 0;
				
				border-bottom-left-radius: 0;
				-webkit-border-bottom-left-radius: 0;
				-moz-border-radius-bottomleft: 0;
			}
		

这段代码有一个细节问题，需要将上面的代码放置在“.button:hover”代码前面，因为我们此处没有为这几种按钮另写一个“:hover”效果。

效果

六、Negative and postion Buttons

第六种按钮效果和前面的“On Button”。“Action Button”类似，只是在“button”上增加了一个“negative”或者“position”类名，然后在单独为这两种类型按钮写了样式。

			.button.negative:hover {
				border: solid 1px #ff3333;
				text-shadow: 0 1px 0 #FCC;
				background: #ffcccc;
				background: -webkit-linear-gradient(top, #ff9999, #DD5555);
				background: -moz-linear-gradient(top, #ff9999, #DD5555);
				background: -ms-linear-gradient(top, #ff9999, #DD5555);
				background: -o-linear-gradient(top, #ff9999, #DD5555);
			}
			.button.positive:hover {
				border: solid 1px #009900;
				text-shadow: 0 1px 0 #CFC;
				background: #ccffcc;
				background: -webkit-linear-gradient(top, #99ff99, #559955);
				background: -moz-linear-gradient(top, #99ff99, #559955);
				background: -ms-linear-gradient(top, #99ff99, #559955);
				background: -o-linear-gradient(top, #99ff99, #559955);
			}
			.button.negative:active {
				border: solid 1px #FF3333;
				background: #ffaaaa;
				text-shadow: 0 1px 0 #CC7777;
				background: -webkit-gradient(linear, left top, left bottom, from(#BB3333), color-stop(0.15, #DD5555), to(#CC5555));
				background: -webkit-linear-gradient(top, #BB3333, #DD5555 15%, #CC5555);
				background: -moz-linear-gradient(top, #BB3333, #DD5555 15%, #CC5555);
				background: -ms-linear-gradient(top, #BB3333, #DD5555 15%, #CC5555);
				background: -o-linear-gradient(top, #BB3333, #DD5555 15%, #CC5555);
			}
			.button.positive:active {
				border: solid 1px #009900;
				background: #aaffaa;
				text-shadow: 0 1px 0 #77CC77;
				background: -webkit-gradient(linear, left top, left bottom, from(#337733), color-stop(0.15, #559955), to(#77CC77));
				background: -webkit-linear-gradient(top, #337733, #559955 15%, #77CC77);
				background: -moz-linear-gradient(top, #337733, #559955 15%, #77CC77);
				background: -ms-linear-gradient(top, #337733, #559955 15%, #77CC77);
				background: -o-linear-gradient(top, #337733, #559955 15%, #77CC77);
			} 
		

效果

七、图标按钮

这里使用sprites技术的配合，制作了一个200个图标的按钮效果。首先来看HTML的不同之处.

HTML Markup

			<div class="buttons"><a href="" class="button"><span class="icon iconNum">iconNum</span></a></div>
		

此处的“iconNum”是代表的“icon”编号，在这里指的是“icon1”至“icon200”。具体可以看下面两张图：

默认icon sprites图：

悬浮状态下的icon sprites图：

下面的样式中就需要使用到这两张图片，接下来看样式的写法吧：

CSS Code

			.ddm span.icon, 
			button span.icon, 
			.button span.icon {
				background-image: url(../images/google+-ui-sprite-gray.png);
				
				display: inline-block;
				margin: 0 7px;
				float: left;
				
				line-height: 18px;
				height: 18px;
				width: 18px;
				max-width: 18px;
				
				overflow: hidden;
				text-indent: -9999px;
				
				background-repeat: no-repeat;
				
				-webkit-transition: background-image 0.20s linear;
				-moz-transition: background-image 0.20s linear;
				-o-transition: background-image 0.20s linear;
				transition: background-image 0.20s linear;
			}
			.ddm:hover span.icon, 
			button:hover span.icon, 
			.button:hover span.icon {
				background-image: url(../images/google+-ui-sprite-colour.png);
			}
			/*=========================
			 * ICON BACKGROUND POSITION
			 *=======================*/
			 /* Sprite Row 1 */
			span.icon1 {background-position: -0px -0px;}
			span.icon2 {background-position: -18px -0px;}
			span.icon3 {background-position: -36px -0px;}
			span.icon4 {background-position: -54px -0px;}
			span.icon5 {background-position: -72px -0px;}
			span.icon6 {background-position: -90px -0px;}
			span.icon7 {background-position: -108px -0px;}
			span.icon8 {background-position: -126px -0px;}
			span.icon9 {background-position: -144px -0px;}
			span.icon10 {background-position: -162px -0px;}
			span.icon11 {background-position: -180px -0px;}
			span.icon12 {background-position: -198px -0px;}
			span.icon13 {background-position: -216px -0px;}
			span.icon14 {background-position: -234px -0px;}
			span.icon15 {background-position: -252px -0px;}
			span.icon16 {background-position: -270px -0px;}
			span.icon17 {background-position: -288px -0px;}
			span.icon18 {background-position: -306px -0px;}
			span.icon19 {background-position: -324px -0px;}
			span.icon20 {background-position: -342px -0px;}

			/* Sprite Row 2 */
			span.icon21 {background-position: -0px -18px;}
			span.icon22 {background-position: -18px -18px;}
			span.icon23 {background-position: -36px -18px;}
			span.icon24 {background-position: -54px -18px;}
			span.icon25 {background-position: -72px -18px;}
			span.icon26 {background-position: -90px -18px;}
			span.icon27 {background-position: -108px -18px;}
			span.icon28 {background-position: -126px -18px;}
			span.icon29 {background-position: -144px -18px;}
			span.icon30 {background-position: -162px -18px;}
			span.icon31 {background-position: -180px -18px;}
			span.icon32 {background-position: -198px -18px;}
			span.icon33 {background-position: -216px -18px;}
			span.icon34 {background-position: -234px -18px;}
			span.icon35 {background-position: -252px -18px;}
			span.icon36 {background-position: -270px -18px;}
			span.icon37 {background-position: -288px -18px;}
			span.icon38 {background-position: -306px -18px;}
			span.icon39 {background-position: -324px -18px;}
			span.icon40 {background-position: -342px -18px;}

			/* Sprite Row 3 */
			span.icon41 {background-position: -0px -36px;}
			span.icon42 {background-position: -18px -36px;}
			span.icon43 {background-position: -36px -36px;}
			span.icon44 {background-position: -54px -36px;}
			span.icon45 {background-position: -72px -36px;}
			span.icon46 {background-position: -90px -36px;}
			span.icon47 {background-position: -108px -36px;}
			span.icon48 {background-position: -126px -36px;}
			span.icon49 {background-position: -144px -36px;}
			span.icon50 {background-position: -162px -36px;}
			span.icon51 {background-position: -180px -36px;}
			span.icon52 {background-position: -198px -36px;}
			span.icon53 {background-position: -216px -36px;}
			span.icon54 {background-position: -234px -36px;}
			span.icon55 {background-position: -252px -36px;}
			span.icon56 {background-position: -270px -36px;}
			span.icon57 {background-position: -288px -36px;}
			span.icon58 {background-position: -306px -36px;}
			span.icon59 {background-position: -324px -36px;}
			span.icon60 {background-position: -342px -36px;}

			/* Sprite Row 4 */
			span.icon61 {background-position: -0px -54px;}
			span.icon62 {background-position: -18px -54px;}
			span.icon63 {background-position: -36px -54px;}
			span.icon64 {background-position: -54px -54px;}
			span.icon65 {background-position: -72px -54px;}
			span.icon66 {background-position: -90px -54px;}
			span.icon67 {background-position: -108px -54px;}
			span.icon68 {background-position: -126px -54px;}
			span.icon69 {background-position: -144px -54px;}
			span.icon70 {background-position: -162px -54px;}
			span.icon71 {background-position: -180px -54px;}
			span.icon72 {background-position: -198px -54px;}
			span.icon73 {background-position: -216px -54px;}
			span.icon74 {background-position: -234px -54px;}
			span.icon75 {background-position: -252px -54px;}
			span.icon76 {background-position: -270px -54px;}
			span.icon77 {background-position: -288px -54px;}
			span.icon78 {background-position: -306px -54px;}
			span.icon79 {background-position: -324px -54px;}
			span.icon80 {background-position: -342px -54px;}

			/* Sprite Row 5 */
			span.icon81 {background-position: -0px -72px;}
			span.icon82 {background-position: -18px -72px;}
			span.icon83 {background-position: -36px -72px;}
			span.icon84 {background-position: -54px -72px;}
			span.icon85 {background-position: -72px -72px;}
			span.icon86 {background-position: -90px -72px;}
			span.icon87 {background-position: -108px -72px;}
			span.icon88 {background-position: -126px -72px;}
			span.icon89 {background-position: -144px -72px;}
			span.icon90 {background-position: -162px -72px;}
			span.icon91 {background-position: -180px -72px;}
			span.icon92 {background-position: -198px -72px;}
			span.icon93 {background-position: -216px -72px;}
			span.icon94 {background-position: -234px -72px;}
			span.icon95 {background-position: -252px -72px;}
			span.icon96 {background-position: -270px -72px;}
			span.icon97 {background-position: -288px -72px;}
			span.icon98 {background-position: -306px -72px;}
			span.icon99 {background-position: -324px -72px;}
			span.icon100 {background-position: -342px -72px;}

			/* Sprite Row 6 */
			span.icon101 {background-position: -0px -90px;}
			span.icon102 {background-position: -18px -90px;}
			span.icon103 {background-position: -36px -90px;}
			span.icon104 {background-position: -54px -90px;}
			span.icon105 {background-position: -72px -90px;}
			span.icon106 {background-position: -90px -90px;}
			span.icon107 {background-position: -108px -90px;}
			span.icon108 {background-position: -126px -90px;}
			span.icon109 {background-position: -144px -90px;}
			span.icon110 {background-position: -162px -90px;}
			span.icon111 {background-position: -180px -90px;}
			span.icon112 {background-position: -198px -90px;}
			span.icon113 {background-position: -216px -90px;}
			span.icon114 {background-position: -234px -90px;}
			span.icon115 {background-position: -252px -90px;}
			span.icon116 {background-position: -270px -90px;}
			span.icon117 {background-position: -288px -90px;}
			span.icon118 {background-position: -306px -90px;}
			span.icon119 {background-position: -324px -90px;}
			span.icon120 {background-position: -342px -90px;}

			/* Sprite Row 7 */
			span.icon121 {background-position: -0px -108px;}
			span.icon122 {background-position: -18px -108px;}
			span.icon123 {background-position: -36px -108px;}
			span.icon124 {background-position: -54px -108px;}
			span.icon125 {background-position: -72px -108px;}
			span.icon126 {background-position: -90px -108px;}
			span.icon127 {background-position: -108px -108px;}
			span.icon128 {background-position: -126px -108px;}
			span.icon129 {background-position: -144px -108px;}
			span.icon130 {background-position: -162px -108px;}
			span.icon131 {background-position: -180px -108px;}
			span.icon132 {background-position: -198px -108px;}
			span.icon133 {background-position: -216px -108px;}
			span.icon134 {background-position: -234px -108px;}
			span.icon135 {background-position: -252px -108px;}
			span.icon136 {background-position: -270px -108px;}
			span.icon137 {background-position: -288px -108px;}
			span.icon138 {background-position: -306px -108px;}
			span.icon139 {background-position: -324px -108px;}
			span.icon140 {background-position: -342px -108px;}

			/* Sprite Row 8 */
			span.icon141 {background-position: -0px -126px;}
			span.icon142 {background-position: -18px -126px;}
			span.icon143 {background-position: -36px -126px;}
			span.icon144 {background-position: -54px -126px;}
			span.icon145 {background-position: -72px -126px;}
			span.icon146 {background-position: -90px -126px;}
			span.icon147 {background-position: -108px -126px;}
			span.icon148 {background-position: -126px -126px;}
			span.icon149 {background-position: -144px -126px;}
			span.icon150 {background-position: -162px -126px;}
			span.icon151 {background-position: -180px -126px;}
			span.icon152 {background-position: -198px -126px;}
			span.icon153 {background-position: -216px -126px;}
			span.icon154 {background-position: -234px -126px;}
			span.icon155 {background-position: -252px -126px;}
			span.icon156 {background-position: -270px -126px;}
			span.icon157 {background-position: -288px -126px;}
			span.icon158 {background-position: -306px -126px;}
			span.icon159 {background-position: -324px -126px;}
			span.icon160 {background-position: -342px -126px;}

			/* Sprite Row 9 */
			span.icon161 {background-position: -0px -144px;}
			span.icon162 {background-position: -18px -144px;}
			span.icon163 {background-position: -36px -144px;}
			span.icon164 {background-position: -54px -144px;}
			span.icon165 {background-position: -72px -144px;}
			span.icon166 {background-position: -90px -144px;}
			span.icon167 {background-position: -108px -144px;}
			span.icon168 {background-position: -126px -144px;}
			span.icon169 {background-position: -144px -144px;}
			span.icon170 {background-position: -162px -144px;}
			span.icon171 {background-position: -180px -144px;}
			span.icon172 {background-position: -198px -144px;}
			span.icon173 {background-position: -216px -144px;}
			span.icon174 {background-position: -234px -144px;}
			span.icon175 {background-position: -252px -144px;}
			span.icon176 {background-position: -270px -144px;}
			span.icon177 {background-position: -288px -144px;}
			span.icon178 {background-position: -306px -144px;}
			span.icon179 {background-position: -324px -144px;}
			span.icon180 {background-position: -342px -144px;}

			/* Sprite Row 10 */
			span.icon181 {background-position: -0px -162px;}
			span.icon182 {background-position: -18px -162px;}
			span.icon183 {background-position: -36px -162px;}
			span.icon184 {background-position: -54px -162px;}
			span.icon185 {background-position: -72px -162px;}
			span.icon186 {background-position: -90px -162px;}
			span.icon187 {background-position: -108px -162px;}
			span.icon188 {background-position: -126px -162px;}
			span.icon189 {background-position: -144px -162px;}
			span.icon190 {background-position: -162px -162px;}
			span.icon191 {background-position: -180px -162px;}
			span.icon192 {background-position: -198px -162px;}
			span.icon193 {background-position: -216px -162px;}
			span.icon194 {background-position: -234px -162px;}
			span.icon195 {background-position: -252px -162px;}
			span.icon196 {background-position: -270px -162px;}
			span.icon197 {background-position: -288px -162px;}
			span.icon198 {background-position: -306px -162px;}
			span.icon199 {background-position: -324px -162px;}
			span.icon200 {background-position: -342px -162px;}
		

效果：

八、Tip按钮

制作这种按钮效果，就需jQuery的版本库以及TipTip jQuery Plugin(你可以到下载)。如果你准备好了这些东东，我们就开如下面的制作。

HTML Markup

			<div class="buttons">
			  <div class="tiptip">
			    <a class="button" title="Home"><span class="icon icon108"></span></a>
			  </div>
			</div>
		

这里有一个关键之处，那就是需要在“.button”元素中增加一个“title”属性，其属性值就是你希望在“tooltip”中显示的内容。如上面的代码所示，在“.button”元素中增加一个“title”属性，并且将其值设置为“Home”。

有了上面的结构后，还需要在“HTML”中调用前面准备好的jQuery的版本库以及TipTip jQuery Plugin。具体放哪，大家都知道，我就不多说了。

			<script src="js/jquery-1.6.2.js"></script>
			<script src="js/jquery.tiptip.js"></script>
		

这些准备好以后，就需要在有“tooltip按钮”地方调用“.tipTip()”函数。

			<script type="text/javascript">
				$(function(){
					//Launch TipTip tooltip
					$(".tiptip a.button, .tiptip button").tipTip();
				});
			</script>
		

上面是完成了“tooltip”功能，那么我们还需要给这些“tooltip按钮”赋予相应的样式。

CSS Code

			/* TipTip CSS - Version 1.2 (Modified) */

			#tiptip_holder {
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 99999;
			}

			#tiptip_holder.tip_top {
				padding-bottom: 5px;
			}

			#tiptip_holder.tip_bottom {
				padding-top: 5px;
			}

			#tiptip_holder.tip_right {
				padding-left: 5px;
			}

			#tiptip_holder.tip_left {
				padding-right: 5px;
			}

			#tiptip_content {
				font: bold 11px Helvetica, Arial, sans-serif;
				color: #FFF;
				padding: 7px;
				background: #000;
				border: 1px solid #FFF;
			}

			#tiptip_arrow, #tiptip_arrow_inner {
				position: absolute;
				border-color: transparent;
				border-style: solid;
				border-width: 6px;
				height: 0;
				width: 0;
			}

			#tiptip_holder.tip_top #tiptip_arrow {
				border-top-color: #fff;
			}

			#tiptip_holder.tip_bottom #tiptip_arrow {
				border-bottom-color: #fff;
			}

			#tiptip_holder.tip_right #tiptip_arrow {
				border-right-color: #fff;
			}

			#tiptip_holder.tip_left #tiptip_arrow {
				border-left-color: #fff;
			}

			#tiptip_holder.tip_top #tiptip_arrow_inner {
				margin-top: -7px;
				margin-left: -6px;
				border-top-color: #000;
			}

			#tiptip_holder.tip_bottom #tiptip_arrow_inner {
				margin-top: -5px;
				margin-left: -6px;
				border-bottom-color: #000;
			}

			#tiptip_holder.tip_right #tiptip_arrow_inner {
				margin-top: -6px;
				margin-left: -5px;
				border-right-color: #000;
			}

			#tiptip_holder.tip_left #tiptip_arrow_inner {
				margin-top: -6px;
				margin-left: -7px;
				border-left-color: #000;
			}

			/* Webkit Hacks  */
			@media screen and (-webkit-min-device-pixel-ratio:0) {	
				#tiptip_content {
					padding: 4px 8px 5px 8px;
					background-color: #000;
				}
				#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
					border-bottom-color: #000;
				}
				#tiptip_holder.tip_top #tiptip_arrow_inner { 
					border-top-color: #000;
				}
			}
		

效果

九、带有标签的Icon按钮

这个效果只是结合了“默认按钮”和“Icon按钮”的风格。只需要在HTML做出一定的修改就Ok了。

HTML Markup

			<div class="buttons">
			  <a class="button" href="#"><span class="icon icon4"></span><span class="label">Profile</span></a>
			</div>
		

效果

十、下拉菜单按钮

制作这个效果，需要配合jQuery代码。首先我们看看其结构上的变化吧。

HTML Markup

			<div class="buttons">
			  <div class="dropdown">
			    <a href="#" class="button"><span class="label">File</span><span class="toggle"></span></a>
			    <div class="dropdown-slider">
			      <a href="#" class="ddm"><span class="label">New</span></a>
			      <a href="#" class="ddm"><span class="label">Save</span></a>
			    </div> 
			  </div>
			</div>
		

CSS Code

			div.dropdown {
				float: left;
				position: relative;
			}

			div.dropdown span.toggle {
				width: 19px;
				height: 16px;
				
				margin-left: 7px;
				margin-top: 1px;
				margin-right: 2px;
				padding-left: 8px;
				
				float: right;
				
				background: url(../images/toggle.png) top right no-repeat;
				border-left: 1px solid #D9D9D9;
				
				-webkit-transition: border-color .20s;
				-moz-transition: border .20s;
				-o-transition: border-color .20s;
				transition: border-color .20s;
			}
			div.dropdown span.toggle.active {
				background: url(../images/toggle.png) bottom right no-repeat;
			}
			div.dropdown 
			button:hover span.toggle, 
			.button:hover span.toggle {
				border-color: #C0C0C0;
			}

			div.dropdown-slider {
				display: none;
				
				overflow: hidden;
				
				margin: 0 7px 5px 7px;
				position: absolute;
				top: 34px;
				right: 0;
				
				background: #F2F2F2;
				
				border-right: solid 1px #D9D9D9;
				border-bottom: solid 1px #D9D9D9;
				border-left: solid 1px #D9D9D9;
				
				-webkit-border-bottom-right-radius: 2px;
				-webkit-border-bottom-left-radius: 2px;
				-moz-border-radius-bottomright: 2px;
				-moz-border-radius-bottomleft: 2px;
				border-bottom-right-radius: 2px;
				border-bottom-left-radius: 2px;
				
				-webkit-transition: border-color .20s;
				-moz-transition: border .20s;
				-o-transition: border-color .20s;
				transition: border-color .20s;
			}
			.left div.dropdown-slider {
				margin: 0 1px 5px 7px;
			}
			.middle div.dropdown-slider {
				margin: 0 1px 5px 1px;
			}
			.right div.dropdown-slider {
				margin: 0 7px 5px 1px;
			}
			div.dropdown-slider .ddm {
				display: block;
				background: #F2F2F2;
				color: #585858;
				
				text-decoration: none;
				text-shadow: 0 1px 0 #fff;
				font: bold 11px Helvetica, Arial, sans-serif;
				line-height: 18px;
				height: 18px;
				
				margin: 0;
				padding: 5px 6px 4px 6px;
				width: 100%;
				float: left;
				
				border-top: 1px solid #FFF;
				border-bottom: 1px solid #D9D9D9;
			}
			div.dropdown-slider .ddm:hover {
				background: #F4F4F4;
				border-bottom-color: #C0C0C0;
			}
			div.dropdown-slider .ddm:active {
				border-bottom-color: #4D90FE;
				color: #4D90FE;
				
				-moz-box-shadow:inset 0 0 10px #D4D4D4;
				-webkit-box-shadow:inset 0 0 10px #D4D4D4;
				box-shadow:inset 0 0 10px #D4D4D4;
			}
			div.dropdown-slider .ddm:last-child {
				border-bottom: none;
			} 
		

jQuery Code

			<script type="text/javascript">
					$(function(){
							// Toggle the dropdown menu's
							$(".dropdown .button, .dropdown button").click(function () {
								if (!$(this).find('span.toggle').hasClass('active')) {
									$('.dropdown-slider').slideUp();
									$('span.toggle').removeClass('active');
								}
							 
								// open selected dropown
								$(this).parent().find('.dropdown-slider').slideToggle('fast');
								$(this).find('span.toggle').toggleClass('active');
								
								return false;
							});		
							
						});
						
						// Close open dropdown slider by clicking elsewhwere on page
						$(document).bind('click', function (e) {
							if (e.target.id != $('.dropdown').attr('class')) {
								$('.dropdown-slider').slideUp();
								$('span.toggle').removeClass('active');
							}
						});
			</script>
		

效果

那么到此有关于Google+的“UI Button”到此就全部分解完了。最后我将所应用到的所有CSS代码贴在这里以供大家参考。（里面附上相关的HTML Markup）

			/*==============================================
			 *		Button Wrapper => class="buttons"
			 *		HTML MARKUP
			 *		<div class="buttons">
			 *			<a class="button" href="#"><span class="label">button</span></a>
			 *			<a class="button" href="#"><span class="label">button</span></a>
			 *		</div>
			 *==============================================*/
			 .buttons {
					/* Style as you wish (toolbar)*/
			 }
			 .buttons:before,
			 .buttons:after {
					content:"";
					display: table;
			 }
			 .buttons:after {
					clear: both;
			 }
			 .buttons {
					zoom:1;
			 }
			 
			 /*================================================
				* 	BASE STYLE FOR BUTTON
				*				HTML MARKUP	
				*		<button>
				*			<span class="label">Button</span>
				*		</button>
				*		OR
				*		<a class="button">
				*			<span class="label">Button</span>
				*		</a>
				*===============================================*/
			/*Default style*/
			button,
			.button {
				text-decoration: none;
				text-shadow: 0 1px 0 #fff;
				
				font: bold 11px Helvetica, Arial, sans-serif;
				color: #444;
				line-height: 17px;
				height: 18px;
				
				display: inline-block;
				float: left;
				
				margin: 5px;
				padding: 5px 6px 4px 6px;
				
				background: #F3F3F3;
				border: solid 1px #D9D9D9;
				
				-webkit-border-radius: 2px;
				-moz-border-radius: 2px;
				border-radius: 2px;
				
				-webkit-transition: border-color .20s;
				-moz-transition: border-color .20s;
				-o-transition: border-color .20s;
				transition: border-color .20s;
			}
			button {
				height: 29px !important;
				cursor: pointer;
			}
			/*============================
			 *	INLINE BUTTONS
			 *  HTML MARKUP
			 *  <a href="#" class="button left"><span class="label">Left</span></a>
			 *  <a href="#" class="button middle"><span class="label">Middle</span></a>
			 *  <a href="#" class="button right"><span class="label">right</span></a>
			 *==========OR=============
			 *  <button class="left"><span class="label">Left</span></button>
			 *  <button class="middle"><span class="label">Middle</span></button>
			 *  <button class="right"><span class="label">Right</span></button>
			 *============================*/
			button.left, 
			.button.left {
				margin: 5px 0 5px 5px;
				
				border-top-right-radius: 0;
				-webkit-border-top-right-radius: 0;
				-moz-border-radius-topright: 0;
				
				border-bottom-right-radius: 0;
				-webkit-border-bottom-right-radius: 0;
				-moz-border-radius-bottomright: 0;
			}

			button.middle, 
			.button.middle {
				margin: 5px 0;
				
				border-left-color: #F4F4F4;
				
				border-radius: 0;
				-webkit-border-radius: 0;
				-moz-border-radius: 0;
			}
			button.right, 
			.button.right {
				margin: 5px 5px 5px 0;
				
				border-left-color: #F4F4F4;
				
				border-top-left-radius: 0;
				-webkit-border-top-left-radius: 0;
				-moz-border-radius-topleft: 0;
				
				border-bottom-left-radius: 0;
				-webkit-border-bottom-left-radius: 0;
				-moz-border-radius-bottomleft: 0;
			}
			/*Suspended state style (:hover)*/
			button:hover,
			.button:hover {
				background: #F4F4F4;
				border-color: #C0C0C0;
				color: #333;
				text-decoration: none;
			}	

			/*Click on the state effect(:active)*/
			button:active, 
			.button:active {
				border-color: #4D90FE;
				color: #4D90FE;
				
				-moz-box-shadow:inset 0 0 10px #D4D4D4;
				-webkit-box-shadow:inset 0 0 10px #D4D4D4;
				box-shadow:inset 0 0 10px #D4D4D4;
			}

			/*=====================================
			 *  $BUTTON LABEL STYLE
			 *====================================*/

			/*====================================
			 *	Dropdown Menu Buttons
			 *	HTML MARKUP
			 *==========DROPDOWN BUTTONS=========
			 *	<div class="dropdown">
			 *    <a href="#" class="button"><span class="label">File</span><span class="toggle"></span></a>
			 *    <div class="dropdown-slider">
			 *      <a href="#" class="ddm"><span class="label">New</span></a>
			 *       <a href="#" class="ddm"><span class="label">Save</span></a>
			 *     </div> <!-- /.dropdown-slider -->
			 *   </div> <!-- /.dropdown -->
			 *========Default Button Label=========
			 *		<button>
			 *			<span class="label">Button</span>
			 *		</button>
			 *=====OR======
			 *		<a class="button">
			 *			<span class="label">Button</span>
			 *		</a>
			 *
			 *==================================*/
			.ddm span.label, 
			button span.label, 
			.button span.label {
				display: inline-block;
				float: left;
				line-height: 17px;
				height: 18px;
				padding: 0 1px;
				overflow: hidden;
				color: #444;
				
				-webkit-transition: color .20s;
				-moz-transition: color .20s;
				-o-transition: color .20s;
				transition: color .20s;
			} 
			button span.label {
				line-height: 15px !important;
			}
			.ddm:active span.label, 
			button:active span.label, 
			.button:active span.label {
					color: #4D90FE;
			}

			button:hover .label, 
			.button:hover .label {
					color: #333;
			}

			button:hover .label.red, 
			.button:hover .label.red {
					color: #DB4A37;
			}
			button:hover .label.blue, 
			.button:hover .label.blue {
					color: #7090C8;
			}
			button:hover .label.green, 
			.button:hover .label.green {
					color: #42B449;
			}
			button:hover .label.yellow, 
			.button:hover .label.yellow {
					color: #F7CB38;
			}

			button.blue .label, 
			.button.blue .label {
				color: #FFF !important;
				text-shadow: 0 1px 0 #2F5BB7 !important;
			}
			button.green .label, 
			.button.green .label {
				color: #FFF !important;
				text-shadow: 0 1px 0 #2D6200 !important;
			}
			button.red .label, 
			.button.red .label {
				color: #FFF !important;
				text-shadow: 0 1px 0 #B0281A !important;
			}
			button.action .label, 
			.button.action .label {
				padding: 0 17px !important;
			}

			button.action:active .label, 
			.button.action:active .label {
				color: #333 !important;
			}

			button.blue:active .label, 
			button.green:active .label, 
			button.red:active .label, 
			.button.blue:active .label, 
			.button.green:active .label, 
			.button.red:active .label {
				color: #FFF !important;
			}

			/*===========================================
			 *		ON BUTTON STYLE
			 *		HTML MARKUP
			 *	<button class="on">
			 *		<span class="label">On Button</span>
			 *	</button>
			 *====	OR  ====
			 *	<a class="button on">
			 *		<span class="label">On Button</span>
			 *	</a>
			 *==========================================*/

			button.on, 
			.button.on {
				border-color: #BBB;
				
				-moz-box-shadow:inset 0 0 10px #D4D4D4;
				-webkit-box-shadow:inset 0 0 10px #D4D4D4;
				box-shadow:inset 0 0 10px #D4D4D4;
			}
			button.on:hover, 
			.button.on:hover {
				border-color: #BBB;
				
				-moz-box-shadow:inset 0 0 10px #D4D4D4;
				-webkit-box-shadow:inset 0 0 10px #D4D4D4;
				box-shadow:inset 0 0 10px #D4D4D4;
			}
			button.on:active, 
			.button.on:active {
				border-color: #4D90FE;
			} 

			/*===========================================
			 *		ACTION BUTTON STYLE
			 *		HTML MARKUP
			 *	<button class="action">
			 *		<span class="label">Action</span>
			 *	</button>
			 *====	OR  ====
			 *	<a class="button action">
			 *		<span class="label">Action</span>
			 *	</a>
			 *==========================================*/

			button.action, 
			.button.action {
				border: 1px solid #D8D8D8 !important;
				
				background: #F2F2F2;
				background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
				background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1);
				background: -ms-linear-gradient(top, #F5F5F5, #F1F1F1);
				background: -o-linear-gradient(top, #F5F5F5, #F1F1F1);
				
				-webkit-transition: border .20s;
				-moz-transition: border .20s;
				-o-transition: border .20s;
				transition: border .20s;
			}
			button.action:hover, 
			.button.action:hover {
				border: 1px solid #C6C6C6 !important;
				
				background: #F3F3F3;
				background: -webkit-linear-gradient(top, #F8F8F8, #F1F1F1);
				background: -moz-linear-gradient(top, #F8F8F8, #F1F1F1);
				background: -ms-linear-gradient(top, #F8F8F8, #F1F1F1);
				background: -o-linear-gradient(top, #F8F8F8, #F1F1F1);

				-moz-box-shadow: 0 1px 0px #DDD;
				-webkit-box-shadow: 0 1px 0px #DDD;
				box-shadow:iset 0 1px 0px #DDD;
			}
			button.action:active, 
			.button.action:active {
				-moz-box-shadow: none !important;
				-webkit-box-shadow: none !important;
				box-shadow: none !important;
				border-color: #C6C6C6 !important;
			}
			/*===========================================
			 *		COLOR BUTTON STYLE
			 *		HTML MARKUP
			 *	<button class="colorName">
			 *		<span class="label">Color's name</span>
			 *	</button>
			 *====	OR  ====
			 *	<a class="button colorName">
			 *		<span class="label">color's name</span>
			 *	</a>
			 *==========================================*/
			/*Blue Button*/
			button.blue, 
			.button.blue {
				border: 1px solid #3079ED !important;
				
				background: #4B8DF8;
				background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);
				background: -moz-linear-gradient(top, #4C8FFD, #4787ED);
				background: -ms-linear-gradient(top, #4C8FFD, #4787ED);
				background: -o-linear-gradient(top, #4C8FFD, #4787ED);
				
				-webkit-transition: border .20s;
				-moz-transition: border .20s;
				-o-transition: border .20s;
				transition: border .20s;
			}
			button.blue:hover, 
			.button.blue:hover {
				border: 1px solid #2F5BB7 !important;
				
				background: #3F83F1;
				background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
				background: -moz-linear-gradient(top, #4D90FE, #357AE8);
				background: -ms-linear-gradient(top, #4D90FE, #357AE8);
				background: -o-linear-gradient(top, #4D90FE, #357AE8);
			}
			button.blue:active, 
			.button.blue:active {
				border-color: #2F5BB7 !important;
			}

			/*green button*/
			button.green, 
			.button.green {
				border: 1px solid #29691D !important;
				
				background: #3A8E00;
				background: -webkit-linear-gradient(top, #3C9300, #398A00);
				background: -moz-linear-gradient(top, #3C9300, #398A00);
				background: -ms-linear-gradient(top, #3C9300, #398A00);
				background: -o-linear-gradient(top, #3C9300, #398A00);
				
				-webkit-transition: border .20s;
				-moz-transition: border .20s;
				-o-transition: border .20s;
				transition: border .20s;
			}
			button.green:hover, 
			.button.green:hover {
				border: 1px solid #2D6200 !important;
				
				background: #3F83F1;
				background: -webkit-linear-gradient(top, #3C9300, #368200);
				background: -moz-linear-gradient(top, #3C9300, #368200);
				background: -ms-linear-gradient(top, #3C9300, #368200);
				background: -o-linear-gradient(top, #3C9300, #368200);
			}
			button.green:active, 
			.button.green:active {
				border-color: #2D6200 !important;
			}

			/*red button*/
			button.red, 
			.button.red {
				border: 1px solid #D14836 !important;
				
				background: #D64937;
				background: -webkit-linear-gradient(top, #DC4A38, #D14836);
				background: -moz-linear-gradient(top, #DC4A38, #D14836);
				background: -ms-linear-gradient(top, #DC4A38, #D14836);
				background: -o-linear-gradient(top, #DC4A38, #D14836);
				
				-webkit-transition: border .20s;
				-moz-transition: border .20s;
				-o-transition: border .20s;
				transition: border .20s;
			}
			button.red:hover, 
			.button.red:hover {
				border: 1px solid #B0281A !important;
				
				background: #D14130;
				background: -webkit-linear-gradient(top, #DC4A38, #C53727);
				background: -moz-linear-gradient(top, #DC4A38, #C53727);
				background: -ms-linear-gradient(top, #DC4A38, #C53727);
				background: -o-linear-gradient(top, #DC4A38, #C53727);
			}
			button.red:active, 
			.button.red:active {
				border-color: #B0281A !important;
			}
			/*==============================
			 * NEGATIVE AND POSITION BUTTON
			 *	HTML MARKUP
			 * <a class="button positive" href="#"><span class="label">Positive</span></a>
			 * <a class="button negative" href="#"><span class="label">Negative</span></a>
			 *=========================*/
			.button.negative:hover {
				border: solid 1px #ff3333;
				text-shadow: 0 1px 0 #FCC;
				background: #ffcccc;
				background: -webkit-linear-gradient(top, #ff9999, #DD5555);
				background: -moz-linear-gradient(top, #ff9999, #DD5555);
				background: -ms-linear-gradient(top, #ff9999, #DD5555);
				background: -o-linear-gradient(top, #ff9999, #DD5555);
			}
			.button.positive:hover {
				border: solid 1px #009900;
				text-shadow: 0 1px 0 #CFC;
				background: #ccffcc;
				background: -webkit-linear-gradient(top, #99ff99, #559955);
				background: -moz-linear-gradient(top, #99ff99, #559955);
				background: -ms-linear-gradient(top, #99ff99, #559955);
				background: -o-linear-gradient(top, #99ff99, #559955);
			}
			.button.negative:active {
				border: solid 1px #FF3333;
				background: #ffaaaa;
				text-shadow: 0 1px 0 #CC7777;
				background: -webkit-gradient(linear, left top, left bottom, from(#BB3333), color-stop(0.15, #DD5555), to(#CC5555));
				background: -webkit-linear-gradient(top, #BB3333, #DD5555 15%, #CC5555);
				background: -moz-linear-gradient(top, #BB3333, #DD5555 15%, #CC5555);
				background: -ms-linear-gradient(top, #BB3333, #DD5555 15%, #CC5555);
				background: -o-linear-gradient(top, #BB3333, #DD5555 15%, #CC5555);
			}
			.button.positive:active {
				border: solid 1px #009900;
				background: #aaffaa;
				text-shadow: 0 1px 0 #77CC77;
				background: -webkit-gradient(linear, left top, left bottom, from(#337733), color-stop(0.15, #559955), to(#77CC77));
				background: -webkit-linear-gradient(top, #337733, #559955 15%, #77CC77);
				background: -moz-linear-gradient(top, #337733, #559955 15%, #77CC77);
				background: -ms-linear-gradient(top, #337733, #559955 15%, #77CC77);
				background: -o-linear-gradient(top, #337733, #559955 15%, #77CC77);
			} 

			/*====================================
			 * ICON BUTTON
			 * HTML MARKUP
			 * <a class="button"><span class="icon icon1"></span></a>
			 *===========OR=========
			 * <button><span class="icon icon1"></span></button>
			 *===================================*/
			.ddm span.icon, 
			button span.icon, 
			.button span.icon {
				background-image: url(../images/google+-ui-sprite-gray.png);
				
				display: inline-block;
				margin: 0 7px;
				float: left;
				
				line-height: 18px;
				height: 18px;
				width: 18px;
				max-width: 18px;
				
				overflow: hidden;
				text-indent: -9999px;
				
				background-repeat: no-repeat;
				
				-webkit-transition: background-image 0.20s linear;
				-moz-transition: background-image 0.20s linear;
				-o-transition: background-image 0.20s linear;
				transition: background-image 0.20s linear;
			}
			.ddm:hover span.icon, 
			button:hover span.icon, 
			.button:hover span.icon {
				background-image: url(../images/google+-ui-sprite-colour.png);
			}
			/*=========================
			 * ICON BACKGROUND POSITION
			 *=======================*/
			 /* Sprite Row 1 */
			span.icon1 {background-position: -0px -0px;}
			span.icon2 {background-position: -18px -0px;}
			span.icon3 {background-position: -36px -0px;}
			span.icon4 {background-position: -54px -0px;}
			span.icon5 {background-position: -72px -0px;}
			span.icon6 {background-position: -90px -0px;}
			span.icon7 {background-position: -108px -0px;}
			span.icon8 {background-position: -126px -0px;}
			span.icon9 {background-position: -144px -0px;}
			span.icon10 {background-position: -162px -0px;}
			span.icon11 {background-position: -180px -0px;}
			span.icon12 {background-position: -198px -0px;}
			span.icon13 {background-position: -216px -0px;}
			span.icon14 {background-position: -234px -0px;}
			span.icon15 {background-position: -252px -0px;}
			span.icon16 {background-position: -270px -0px;}
			span.icon17 {background-position: -288px -0px;}
			span.icon18 {background-position: -306px -0px;}
			span.icon19 {background-position: -324px -0px;}
			span.icon20 {background-position: -342px -0px;}

			/* Sprite Row 2 */
			span.icon21 {background-position: -0px -18px;}
			span.icon22 {background-position: -18px -18px;}
			span.icon23 {background-position: -36px -18px;}
			span.icon24 {background-position: -54px -18px;}
			span.icon25 {background-position: -72px -18px;}
			span.icon26 {background-position: -90px -18px;}
			span.icon27 {background-position: -108px -18px;}
			span.icon28 {background-position: -126px -18px;}
			span.icon29 {background-position: -144px -18px;}
			span.icon30 {background-position: -162px -18px;}
			span.icon31 {background-position: -180px -18px;}
			span.icon32 {background-position: -198px -18px;}
			span.icon33 {background-position: -216px -18px;}
			span.icon34 {background-position: -234px -18px;}
			span.icon35 {background-position: -252px -18px;}
			span.icon36 {background-position: -270px -18px;}
			span.icon37 {background-position: -288px -18px;}
			span.icon38 {background-position: -306px -18px;}
			span.icon39 {background-position: -324px -18px;}
			span.icon40 {background-position: -342px -18px;}

			/* Sprite Row 3 */
			span.icon41 {background-position: -0px -36px;}
			span.icon42 {background-position: -18px -36px;}
			span.icon43 {background-position: -36px -36px;}
			span.icon44 {background-position: -54px -36px;}
			span.icon45 {background-position: -72px -36px;}
			span.icon46 {background-position: -90px -36px;}
			span.icon47 {background-position: -108px -36px;}
			span.icon48 {background-position: -126px -36px;}
			span.icon49 {background-position: -144px -36px;}
			span.icon50 {background-position: -162px -36px;}
			span.icon51 {background-position: -180px -36px;}
			span.icon52 {background-position: -198px -36px;}
			span.icon53 {background-position: -216px -36px;}
			span.icon54 {background-position: -234px -36px;}
			span.icon55 {background-position: -252px -36px;}
			span.icon56 {background-position: -270px -36px;}
			span.icon57 {background-position: -288px -36px;}
			span.icon58 {background-position: -306px -36px;}
			span.icon59 {background-position: -324px -36px;}
			span.icon60 {background-position: -342px -36px;}

			/* Sprite Row 4 */
			span.icon61 {background-position: -0px -54px;}
			span.icon62 {background-position: -18px -54px;}
			span.icon63 {background-position: -36px -54px;}
			span.icon64 {background-position: -54px -54px;}
			span.icon65 {background-position: -72px -54px;}
			span.icon66 {background-position: -90px -54px;}
			span.icon67 {background-position: -108px -54px;}
			span.icon68 {background-position: -126px -54px;}
			span.icon69 {background-position: -144px -54px;}
			span.icon70 {background-position: -162px -54px;}
			span.icon71 {background-position: -180px -54px;}
			span.icon72 {background-position: -198px -54px;}
			span.icon73 {background-position: -216px -54px;}
			span.icon74 {background-position: -234px -54px;}
			span.icon75 {background-position: -252px -54px;}
			span.icon76 {background-position: -270px -54px;}
			span.icon77 {background-position: -288px -54px;}
			span.icon78 {background-position: -306px -54px;}
			span.icon79 {background-position: -324px -54px;}
			span.icon80 {background-position: -342px -54px;}

			/* Sprite Row 5 */
			span.icon81 {background-position: -0px -72px;}
			span.icon82 {background-position: -18px -72px;}
			span.icon83 {background-position: -36px -72px;}
			span.icon84 {background-position: -54px -72px;}
			span.icon85 {background-position: -72px -72px;}
			span.icon86 {background-position: -90px -72px;}
			span.icon87 {background-position: -108px -72px;}
			span.icon88 {background-position: -126px -72px;}
			span.icon89 {background-position: -144px -72px;}
			span.icon90 {background-position: -162px -72px;}
			span.icon91 {background-position: -180px -72px;}
			span.icon92 {background-position: -198px -72px;}
			span.icon93 {background-position: -216px -72px;}
			span.icon94 {background-position: -234px -72px;}
			span.icon95 {background-position: -252px -72px;}
			span.icon96 {background-position: -270px -72px;}
			span.icon97 {background-position: -288px -72px;}
			span.icon98 {background-position: -306px -72px;}
			span.icon99 {background-position: -324px -72px;}
			span.icon100 {background-position: -342px -72px;}

			/* Sprite Row 6 */
			span.icon101 {background-position: -0px -90px;}
			span.icon102 {background-position: -18px -90px;}
			span.icon103 {background-position: -36px -90px;}
			span.icon104 {background-position: -54px -90px;}
			span.icon105 {background-position: -72px -90px;}
			span.icon106 {background-position: -90px -90px;}
			span.icon107 {background-position: -108px -90px;}
			span.icon108 {background-position: -126px -90px;}
			span.icon109 {background-position: -144px -90px;}
			span.icon110 {background-position: -162px -90px;}
			span.icon111 {background-position: -180px -90px;}
			span.icon112 {background-position: -198px -90px;}
			span.icon113 {background-position: -216px -90px;}
			span.icon114 {background-position: -234px -90px;}
			span.icon115 {background-position: -252px -90px;}
			span.icon116 {background-position: -270px -90px;}
			span.icon117 {background-position: -288px -90px;}
			span.icon118 {background-position: -306px -90px;}
			span.icon119 {background-position: -324px -90px;}
			span.icon120 {background-position: -342px -90px;}

			/* Sprite Row 7 */
			span.icon121 {background-position: -0px -108px;}
			span.icon122 {background-position: -18px -108px;}
			span.icon123 {background-position: -36px -108px;}
			span.icon124 {background-position: -54px -108px;}
			span.icon125 {background-position: -72px -108px;}
			span.icon126 {background-position: -90px -108px;}
			span.icon127 {background-position: -108px -108px;}
			span.icon128 {background-position: -126px -108px;}
			span.icon129 {background-position: -144px -108px;}
			span.icon130 {background-position: -162px -108px;}
			span.icon131 {background-position: -180px -108px;}
			span.icon132 {background-position: -198px -108px;}
			span.icon133 {background-position: -216px -108px;}
			span.icon134 {background-position: -234px -108px;}
			span.icon135 {background-position: -252px -108px;}
			span.icon136 {background-position: -270px -108px;}
			span.icon137 {background-position: -288px -108px;}
			span.icon138 {background-position: -306px -108px;}
			span.icon139 {background-position: -324px -108px;}
			span.icon140 {background-position: -342px -108px;}

			/* Sprite Row 8 */
			span.icon141 {background-position: -0px -126px;}
			span.icon142 {background-position: -18px -126px;}
			span.icon143 {background-position: -36px -126px;}
			span.icon144 {background-position: -54px -126px;}
			span.icon145 {background-position: -72px -126px;}
			span.icon146 {background-position: -90px -126px;}
			span.icon147 {background-position: -108px -126px;}
			span.icon148 {background-position: -126px -126px;}
			span.icon149 {background-position: -144px -126px;}
			span.icon150 {background-position: -162px -126px;}
			span.icon151 {background-position: -180px -126px;}
			span.icon152 {background-position: -198px -126px;}
			span.icon153 {background-position: -216px -126px;}
			span.icon154 {background-position: -234px -126px;}
			span.icon155 {background-position: -252px -126px;}
			span.icon156 {background-position: -270px -126px;}
			span.icon157 {background-position: -288px -126px;}
			span.icon158 {background-position: -306px -126px;}
			span.icon159 {background-position: -324px -126px;}
			span.icon160 {background-position: -342px -126px;}

			/* Sprite Row 9 */
			span.icon161 {background-position: -0px -144px;}
			span.icon162 {background-position: -18px -144px;}
			span.icon163 {background-position: -36px -144px;}
			span.icon164 {background-position: -54px -144px;}
			span.icon165 {background-position: -72px -144px;}
			span.icon166 {background-position: -90px -144px;}
			span.icon167 {background-position: -108px -144px;}
			span.icon168 {background-position: -126px -144px;}
			span.icon169 {background-position: -144px -144px;}
			span.icon170 {background-position: -162px -144px;}
			span.icon171 {background-position: -180px -144px;}
			span.icon172 {background-position: -198px -144px;}
			span.icon173 {background-position: -216px -144px;}
			span.icon174 {background-position: -234px -144px;}
			span.icon175 {background-position: -252px -144px;}
			span.icon176 {background-position: -270px -144px;}
			span.icon177 {background-position: -288px -144px;}
			span.icon178 {background-position: -306px -144px;}
			span.icon179 {background-position: -324px -144px;}
			span.icon180 {background-position: -342px -144px;}

			/* Sprite Row 10 */
			span.icon181 {background-position: -0px -162px;}
			span.icon182 {background-position: -18px -162px;}
			span.icon183 {background-position: -36px -162px;}
			span.icon184 {background-position: -54px -162px;}
			span.icon185 {background-position: -72px -162px;}
			span.icon186 {background-position: -90px -162px;}
			span.icon187 {background-position: -108px -162px;}
			span.icon188 {background-position: -126px -162px;}
			span.icon189 {background-position: -144px -162px;}
			span.icon190 {background-position: -162px -162px;}
			span.icon191 {background-position: -180px -162px;}
			span.icon192 {background-position: -198px -162px;}
			span.icon193 {background-position: -216px -162px;}
			span.icon194 {background-position: -234px -162px;}
			span.icon195 {background-position: -252px -162px;}
			span.icon196 {background-position: -270px -162px;}
			span.icon197 {background-position: -288px -162px;}
			span.icon198 {background-position: -306px -162px;}
			span.icon199 {background-position: -324px -162px;}
			span.icon200 {background-position: -342px -162px;}

			/*=============================
			 * TIP BUTTONS
			 * HTML MARKUP
			 * <div class="tiptip">
			 *  <a class="button" title="Home"><span class="icon icon108"></span></a>
			 * </div>
			 *=========OR=========
			 * <div class="tiptip">
			 *  <button title="Home"><span class="icon icon108"></span></button>
			 * </div>
			 *============================*/
			/* TipTip CSS - Version 1.2 (Modified) */

			#tiptip_holder {
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 99999;
			}

			#tiptip_holder.tip_top {
				padding-bottom: 5px;
			}

			#tiptip_holder.tip_bottom {
				padding-top: 5px;
			}

			#tiptip_holder.tip_right {
				padding-left: 5px;
			}

			#tiptip_holder.tip_left {
				padding-right: 5px;
			}

			#tiptip_content {
				font: bold 11px Helvetica, Arial, sans-serif;
				color: #FFF;
				padding: 7px;
				background: #000;
				border: 1px solid #FFF;
			}

			#tiptip_arrow, #tiptip_arrow_inner {
				position: absolute;
				border-color: transparent;
				border-style: solid;
				border-width: 6px;
				height: 0;
				width: 0;
			}

			#tiptip_holder.tip_top #tiptip_arrow {
				border-top-color: #fff;
			}

			#tiptip_holder.tip_bottom #tiptip_arrow {
				border-bottom-color: #fff;
			}

			#tiptip_holder.tip_right #tiptip_arrow {
				border-right-color: #fff;
			}

			#tiptip_holder.tip_left #tiptip_arrow {
				border-left-color: #fff;
			}

			#tiptip_holder.tip_top #tiptip_arrow_inner {
				margin-top: -7px;
				margin-left: -6px;
				border-top-color: #000;
			}

			#tiptip_holder.tip_bottom #tiptip_arrow_inner {
				margin-top: -5px;
				margin-left: -6px;
				border-bottom-color: #000;
			}

			#tiptip_holder.tip_right #tiptip_arrow_inner {
				margin-top: -6px;
				margin-left: -5px;
				border-right-color: #000;
			}

			#tiptip_holder.tip_left #tiptip_arrow_inner {
				margin-top: -6px;
				margin-left: -7px;
				border-left-color: #000;
			}

			/* Webkit Hacks  */
			@media screen and (-webkit-min-device-pixel-ratio:0) {	
				#tiptip_content {
					padding: 4px 8px 5px 8px;
					background-color: #000;
				}
				#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
					border-bottom-color: #000;
				}
				#tiptip_holder.tip_top #tiptip_arrow_inner { 
					border-top-color: #000;
				}
			}

			/*==================================
			 *  ICON BUTTONS WITH LABEL
			 *  HTML MARKUP
			 *  <a class="button" href="#"><span class="icon icon4"></span><span class="label">Profile</span></a>
			 * ==========OR=======
			 * <button href="#"><span class="icon icon4"></span><span class="label">Profile</span></button>
			 *=================================*/
			 
			/*=================================
			 * DROPDOWN MENU
			 * HTML MARKUP
			 * <div class="dropdown">
			 *	<a href="#" class="button"><span class="label">File</span><span class="toggle"></span></a>
			 *	<div class="dropdown-slider">
			 *		<a href="#" class="ddm"><span class="label">New</span></a>
			 *		<a href="#" class="ddm"><span class="label">Save</span></a>
			 *	</div> 
			 * </div>
			 *============OR===========
			 * <div class="dropdown">
			 *   <a href="#" class="button"><span class="icon icon55"></span><span class="label">File</span><span class="toggle"></span></a>
			 *   <div class="dropdown-slider">
			 *     <a href="#" class="ddm"><span class="icon icon68"></span><span class="label">New</span></a>
			 *     <a href="#" class="ddm"><span class="icon icon92"></span><span class="label">Open</span></a>
			 *     <a href="#" class="ddm"><span class="icon icon67"></span><span class="label">Save</span></a>
			 *   </div> 
			 *  </div> 
			 *================================*/
			div.dropdown {
				float: left;
				position: relative;
			}

			div.dropdown span.toggle {
				width: 19px;
				height: 16px;
				
				margin-left: 7px;
				margin-top: 1px;
				margin-right: 2px;
				padding-left: 8px;
				
				float: right;
				
				background: url(../images/toggle.png) top right no-repeat;
				border-left: 1px solid #D9D9D9;
				
				-webkit-transition: border-color .20s;
				-moz-transition: border .20s;
				-o-transition: border-color .20s;
				transition: border-color .20s;
			}
			div.dropdown span.toggle.active {
				background: url(../images/toggle.png) bottom right no-repeat;
			}
			div.dropdown 
			button:hover span.toggle, 
			.button:hover span.toggle {
				border-color: #C0C0C0;
			}

			div.dropdown-slider {
				display: none;
				
				overflow: hidden;
				
				margin: 0 7px 5px 7px;
				position: absolute;
				top: 34px;
				right: 0;
				
				background: #F2F2F2;
				
				border-right: solid 1px #D9D9D9;
				border-bottom: solid 1px #D9D9D9;
				border-left: solid 1px #D9D9D9;
				
				-webkit-border-bottom-right-radius: 2px;
				-webkit-border-bottom-left-radius: 2px;
				-moz-border-radius-bottomright: 2px;
				-moz-border-radius-bottomleft: 2px;
				border-bottom-right-radius: 2px;
				border-bottom-left-radius: 2px;
				
				-webkit-transition: border-color .20s;
				-moz-transition: border .20s;
				-o-transition: border-color .20s;
				transition: border-color .20s;
			}
			.left div.dropdown-slider {
				margin: 0 1px 5px 7px;
			}
			.middle div.dropdown-slider {
				margin: 0 1px 5px 1px;
			}
			.right div.dropdown-slider {
				margin: 0 7px 5px 1px;
			}
			div.dropdown-slider .ddm {
				display: block;
				background: #F2F2F2;
				color: #585858;
				
				text-decoration: none;
				text-shadow: 0 1px 0 #fff;
				font: bold 11px Helvetica, Arial, sans-serif;
				line-height: 18px;
				height: 18px;
				
				margin: 0;
				padding: 5px 6px 4px 6px;
				width: 100%;
				float: left;
				
				border-top: 1px solid #FFF;
				border-bottom: 1px solid #D9D9D9;
			}
			div.dropdown-slider .ddm:hover {
				background: #F4F4F4;
				border-bottom-color: #C0C0C0;
			}
			div.dropdown-slider .ddm:active {
				border-bottom-color: #4D90FE;
				color: #4D90FE;
				
				-moz-box-shadow:inset 0 0 10px #D4D4D4;
				-webkit-box-shadow:inset 0 0 10px #D4D4D4;
				box-shadow:inset 0 0 10px #D4D4D4;
			}
			div.dropdown-slider .ddm:last-child {
				border-bottom: none;
			} 

		

最后希望大家喜欢这个“UI Button”。很抱歉上面没有附上DEMO效果，如果你喜欢的话可以点击下面的相应地址获取相关资源：

1. DEMO在线地址:Google+ Styled Buttons
2. GitHub下载地址：Downloads
3. 本文代码下载地址：googlePlusButtons.rar
4. 源码教程地址：Google+ UI Button教程
5. 200Icons设计者：WebDesignShock

为了大家更好的学习有关于Button的制作，下面在为大家提供一些本站所汲及到有关Button制作的教程：

1. CSS3 Gradient Buttons
2. CSS3和HTML实体符制作带图片效果的Buttons
3. LESS和CSS3动态制作按钮
4. CSS3 Buttons框架
5. CSS3伪元素应用——CSS3 Button
6. Bootstrap Buttons
7. input 按钮在IE下兼容问题
8. 表单button的text-indent问题
9. 表单button的outline问题
10. 表单button的行高问题

那今天有关于“Google+ UI Button”就介绍到这里，如果你对按钮制作有更好的方法或者建议，请在下面的评论中直接与我们共享。

如需转载烦请注明出处：W3CPLUS

Air Foamposite One Pro