来自：http://www.w3cplus.com/css3/google-plus-ui-button-framework
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”分成以下几类：
- 基本按钮
- ON Button
- 动作按钮
- 颜色按钮
- Inline Button
- Negative and postion Buttons
- 图标按钮
- Tip按钮
- 有标签的图标按钮
- 下接菜单按钮
一、基本按钮
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效果，如果你喜欢的话可以点击下面的相应地址获取相关资源：
- DEMO在线地址:Google+ Styled Buttons
- GitHub下载地址：Downloads
- 本文代码下载地址：googlePlusButtons.rar
- 源码教程地址：Google+ UI Button教程
- 200Icons设计者：WebDesignShock
为了大家更好的学习有关于Button的制作，下面在为大家提供一些本站所汲及到有关Button制作的教程：
- CSS3 Gradient Buttons
- CSS3和HTML实体符制作带图片效果的Buttons
- LESS和CSS3动态制作按钮
- CSS3 Buttons框架
- CSS3伪元素应用——CSS3 Button
- Bootstrap Buttons
- input 按钮在IE下兼容问题
- 表单button的text-indent问题
- 表单button的outline问题
- 表单button的行高问题
那今天有关于“Google+ UI Button”就介绍到这里，如果你对按钮制作有更好的方法或者建议，请在下面的评论中直接与我们共享。
3041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
