纯CSS画的Google+按钮

觉得网站放一个Google +1 Button蛮优雅的, 所以写了这个
先上DEMO, 纯css哦, 你们感受一下:

DEMO

888

chrome下比ff下好看一点, Damn ff!
然后下面是源码, (越来越觉得自己身处github了)

HTML

<button class="gplusbtn"><span class="label">g</span><span>+1</span></button><a class="gcount">888</a>

CSS

首先Catull是Google的logo使用的字体, 我觉得为一个字母加载一整个字体文件挺浪费的, 所以就用fontcreator把其他字母去掉了, 然后如果有感兴趣的可以点此下载精简后的Catull2.ttf, 6kb, 只有一个字母g

/**
 * GplusButoon-like css
 * coder: xiaohudie
 * 2013-05-11
 */
@font-face {
	font-family: Catull2;font-style:  normal;font-weight: 400;src: url("../Catull2.ttf");
}
/** Google +1 button BEGIN **/
button.gplusbtn {
	text-decoration: none;text-shadow: 0 1px 0 #fff;font: 11px Helvetica, Arial, sans-serif;color: #444;line-height: 17px;display: inline-block;float: left; margin: 0px; padding: 0px 6px; border-radius: 3px; height: 24px; width:39px; cursor: pointer; border: 1px solid brown; box-shadow:inset 0px 1px 2px #F78377; background: #D64937; background: linear-gradient(#DC4A38, #D14836); transition: border .20s;
}
button.gplusbtn span.label {
	display: inline-block; float: left;  transition: color .20s; line-height: 15px; color: #FFF ; text-shadow: -1px 1px 0 #000 ;  font: 27px 'Catull2'; margin-left: -9px;margin-top: -7px; 
}
button.gplusbtn span  {
	line-height: 23px; color: #FFF ; text-shadow: -1px 1px 0 #000 ;  font-size: 13px  ; margin-left: 5px; 
}
button.gplusbtn:hover {
	border: 1px solid #B0281A !important; background: #D14130; background: linear-gradient(#DC4A38, #C53727); box-shadow:inset 0px 5px 25px #FF8C56; 
}
button.gplusbtn:active {
	box-shadow:inset -1px 1px 2px brown  ; border-color: #B0281A !important; 
}
/** Google +1 count **/
.gcount {
	position: relative; display: inline-block; padding: 0 7px 0; margin-left: 8px; font-size: 11px; line-height: 20px; color: #666; vertical-align: middle; background-color: #fafafa; border: 1px solid #ccc; border-radius: 3px; 
}
.gcount:before{
	content:"";display:block;width:0;height:0;border:5px solid #ccc;border-color:transparent #ccc transparent transparent;position:absolute;right:100%;margin-right:0;top:50%;margin-top:-5px
}
.gcount:after{
	content:"";display:block;width:0;height:0;border:5px solid #fafafa;border-color:transparent #fafafa transparent transparent;position:absolute;right:100%;margin-right:-1px;top:50%;margin-top:-5px
}

我觉得Google应该聘我去做大前端

50 Comments

Name *

E-mail *

Website

  1. Android

    头像换了。。围观

    • 小蝴蝶

      @Android 其实只换了自己网站的头像 出去留言那个邮箱没换

      • Android

        @小蝴蝶 跟我一样&我也是这样 对外用@Ffu@#c@#)k@g@~fwbbs..gov.cn的邮箱 (你懂的)
        然后自己的站用另一个。。

  2. 郑永

    小蝴蝶前后端大师,呵呵。

  3. 衣服网

    真的很专业啊,全是代码,我慢慢的看吧,

  4. Rilun

    CSS3绘图现在越来越多了 可惜现在的主流浏览器都是高版本支持 而且还有些只是弱弱地支持 加上私有属性 HTML5的绘图支持如是

  5. 老刘