纯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应该聘我去做大前端

LIKE OR SHARE IT:

admin发表于Code目录下,标签为,转载请保留链接

TOP DOWN
发表评论

您必须 [ 登录 ] 才能发表留言!

  1. 沙 发 公子

    哟,沙发!

    五月 11, 2013 17:25:49
  2. 板 凳 公子

    越来越有github 的感觉了。。。。

    五月 11, 2013 17:26:17
  3. 地 板 阿邙

    火狐下有错位

    五月 11, 2013 17:32:59
  4. 地 毯 yxiao

    哎呦,不错哦。

    五月 11, 2013 18:17:05
  5. 地 面 不亦乐乎

    CSS要写这么多,一个图片搞定。

    五月 11, 2013 19:56:32
  6. 地 下 DruidFY

    可以的,如果去了google以后给我点福利

    五月 11, 2013 20:11:49
  7. 7 楼 Android

    这。。越发有走出wall的感觉。。
    今天也发了一篇吐槽谷歌的文章 他们也应该给我钱 否则我就去苏州婚纱沙龙上大闹一场。。

    五月 11, 2013 20:55:55
  8. 8 楼 大发

    为什么是+888呢,羞

    五月 11, 2013 21:03:53
  9. 9 楼 跑调的包子

    3 8
    信息量杠杠的

    五月 11, 2013 21:21:13
  10. 10 楼 airoschou

    好吧,你好像没装

    五月 11, 2013 22:26:45
  11. 11 楼 W3C_SVG

    to consider svg elements instead of an external font
    @小蝴蝶最漂亮?

    五月 11, 2013 22:34:10
  12. 12 楼 ChoJemmy

    点了一下按钮只后,再滑动鼠标,那个g+加会跟着上下移动一小点。是bug吧。

    五月 11, 2013 23:01:44
  13. 13 楼 梦月酱

    现在都爱好CSS3了

    五月 12, 2013 00:08:07
  14. 14 楼 OYOY

    我觉得谷歌可以认真考虑一下

    五月 12, 2013 02:21:22
  15. 15 楼 Arch!Tech

    你的主题有木有发布?

    五月 12, 2013 02:31:22
  16. 16 楼 般若大叔

    圆角不兼容IE,兼容就完美了,哈哈,用这个DD_roundies_0.0.2a-min.jss实现IE圆角兼容吧

    五月 12, 2013 04:31:26
  17. 17 楼 独家记忆

    哈哈哈 最后一句亮了

    五月 12, 2013 10:57:39
  18. 18 楼 Tokin

    我觉得Google应该聘你去做大前端
    没有表情了啊,,,

    五月 12, 2013 11:50:49
  19. 19 楼 梦月酱

    越来越有爱了

    五月 12, 2013 12:52:50
  20. 20 楼 所谓刚子

    不错的效果 现在真是越来越css3了啊。。。。

    五月 12, 2013 13:41:20
  21. 21 楼 Android

    头像换了。。围观

    五月 12, 2013 14:19:14
    • 小蝴蝶

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

      2101室 五月 12, 2013 14:42:45
      • Android

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

        2102室 五月 12, 2013 15:01:29
  22. 22 楼 郑永

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

    五月 13, 2013 03:03:54
  23. 23 楼 衣服网

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

    五月 16, 2013 15:46:24
  24. 24 楼 Rilun

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

    五月 17, 2013 23:37:41