觉得网站放一个Google +1 Button蛮优雅的, 所以写了这个
先上DEMO, 纯css哦, 你们感受一下:
DEMO
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应该聘我去做大前端
css-gplus-button is coded by http://xiaohudie.net. Any posts here is one hundred percent original, so please keep my link so as not to hurt this pretty girl. -
头像换了。。围观
@Android 其实只换了自己网站的头像 出去留言那个邮箱没换
@小蝴蝶 跟我一样&我也是这样 对外用@Ffu@#c@#)k@g@~fwbbs..gov.cn的邮箱 (你懂的)
然后自己的站用另一个。。
小蝴蝶前后端大师,呵呵。
真的很专业啊,全是代码,我慢慢的看吧,
CSS3绘图现在越来越多了 可惜现在的主流浏览器都是高版本支持 而且还有些只是弱弱地支持 加上私有属性 HTML5的绘图支持如是
赞