CSS3制作分享按钮_icon, button 教程

作者：大漠日期：2012-03-20 点击：1185

Nicolas Gallagher在Pure CSS GUI icons中使用纯CSS3制作的各种ICON的DEMO，让我再次领会了CSS3的强大。

大家看到这个DEMO一定也会觉得CSS3很强大吧，同时也会自叹自己怎么就没有Nicolas Gallagher这种水平呢？其实只是自己没有他那样的思维，不敢去想，也不敢去尝试。别的不多说，说了也没意思，还是切入今天的主题吧。今天我在Nicolas Gallagher思路上也仿制了几个常见共享按钮的效果，希望大家喜欢。

看到上面的效果，大家肯定想看看是怎么实现的吧，那还等什么呢？直接往下看。

HTML Markup

这里的结构就很简单了，上面的DEMO仅采用了一个标签，你可以是HTML中的任何标签，不过此处为了说明DEMO的实现，我采用的是一个列表形式。

			<ul>
			  <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
			  <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li>
			  <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li>
			  <li class="flickr"><a href="#non" title="Share on Flickr">Flickr</a></li>
			  <li class="delicious"><a href="#non" title="Bookmark on Delicious">Delicious</a></li>
			  <li class="linkedin"><a href="#non" title="Share on LinkedIn">LinkedIn</a></li>
			  <li class="google"><a href="#non" title="Bookmark with Google">Google</a></li>
			  <li class="orkut"><a href="#non" title="Share on Orkut">Orkut</a></li>
			  <li class="technorati"><a href="#non" title="Add to Technorati">Technorati</a></li>
			  <li class="netvibes"><a href="#non" title="Add to NetVibes">NetVibes</a></li>
			  <li class="google-plus"><a href="#non" title="Add to google+">Google+</a></li>
			  <li class="yahoo"><a href="#non" title="Add to yahoo">Yahoo</a></li>
			  <li class="tumblr"><a href="#non" title="Add to tumblr">Tumblr</a></li>
			</ul>

在具体写每个按钮之前，先给这些按钮一些基本样式

Base Css

			body {
				padding:0; 
				margin:0; 
				font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; 
				background:#fff;
			}
			ul {
				list-style:none;
				padding:0;
				margin:0;
				overflow:hidden;
				font:0.875em/1 Arial, sans-serif;
			}

			ul li {
				float:left;
				width:66px;
				height:66px;
				margin:20px 20px 0 0;
			}

			ul li a {
				display:block;
				width:64px;
				height:64px;
				overflow:hidden;
				border:1px solid transparent;
				line-height:64px;
				text-decoration:none;
				border-radius:5px; 
			}

			ul li a:hover,
			ul li a:focus,
			ul li a:active {
				opacity:0.8;
				border-color:#000;
			}

接下来分别看看每个按钮的代码：

一、Facebook

			.facebook a {
        position: relative;
        border-color: #3c5a98;
        text-transform: lowercase;
        text-indent: 34px;
        letter-spacing: 10px;
        font-weight: bold;
				font-size: 64px;
        line-height: 66px;
        color: #fff;
        background: #3c5a98;
        box-shadow: 0 0 4px rgba(0,0,0,0.4);
      }

Facebook这个按钮是相当的简单，没有什么特别之处。在这个效果中，采用了“text-indent”来控制文字的显示位置，“letter-spacing”配合“li”中的“overflow”来隐藏其他的字母（这样的使用在后面的按钮中都有或多或少的用到）。

二、Twitter

        .twitter a {
            position: relative;
            border-color: #a8eaec;
            text-indent: 20px;
            letter-spacing: 40px;
            font: bold 60px/1 Tahoma,sans-serif;
            line-height: 60px;
            background: #daf6f7;
            text-shadow: 3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff;
            box-shadow: 0 0 4px rgba(0,0,0,0.4);
            background-image: -webkit-gradient(linear, left top,left bottom,from(#dbf7f8),to(#88e1e6));
            background-image: -webkit-linear-gradient(top,#dbf7f8,#88e1e6);
            background-image: -moz-linear-gradient(top,#dbf7f8,#88e1e6);
            background-image: -o-linear-gradient(top,#dbf7f8,#88e1e6);
            background-image: -ms-linear-gradient(top,#dbf7f8,#88e1e6);
            background-image: linear-gradient(top,#dbf7f8,#88e1e6);
            text-transform: lowercase;
            color: #76ddf8;
        }

Twitter按钮的效果有两个关键之处，给文字使用了多重文字阴影，而且背景使用的是渐变制作。

三、RSS

			.rss a {
            position: relative;
            width: 60px;
            padding: 0 2px;
            border-color: #ea6635;
            text-transform: lowercase;
            text-indent: -186px;
            font-size: 64px;
            font-weight: bold;
            background: #e36443;
            box-shadow: 0 0 4px rgba(0,0,0,0.4);
            background-image: -webkit-gradient(linear,left top, left bottom,from(#f19242),to(#e36443));
            background-image: -webkit-linear-gradient(top,#f19242,#e36443);
            background-image: -moz-linear-gradient(top,#f19242,#e36443);
            background-image: -o-linear-gradient(top,#f19242,#e36443);
            background-image: -ms-linear-gradient(top,#f19242,#e36443);
            background-image: linear-gradient(top,#f19242,#e36443);
        }
				/*圆点*/
        .rss a::before {
            content:"\00a0";
            position: absolute;
            bottom: 10px;
            left: 10px;
            width: 12px;
            height: 12px;
            background: #fff;
            border-radius: 12px;
        }
				/*弧形*/
        .rss a::after {
            content:"\00a0";
            position: absolute;
            bottom: 10px;
            left: 10px;
            height: 22px;
            width: 22px;
            border: 24px double #fff;
            border-width: 24px 24px 0 0;
            border-radius: 0 50px 0 0;
        }

RSS制作效果相对来说复杂一些了，在“a”元素上制作了按钮的背景色，而其中圆点和两个弧形是通过CSS3的伪元素实现的。

四、Flickr

       .flickr a {
            position:relative;
            border-color:#d2d2d2;
            text-indent:-9000px;
            font-size:108px;
            font-weight:bold;
            color:#fff;
            background:#fff;    
            box-shadow:0 0 4px rgba(0,0,0,0.4);
            background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#d2d2d2));
            background-image:-webkit-linear-gradient(top, #fff, #d2d2d2);
            background-image:-moz-linear-gradient(top, #fff, #d2d2d2);
            background-image:-o-linear-gradient(top, #fff, #d2d2d2);
            background-image:-ms-linear-gradient(top, #fff, #d2d2d2);
            background-image:linear-gradient(top, #fff, #d2d2d2);
        }
				/*蓝色圆点*/
        .flickr a::before {
            content:"\00a0";
            position:absolute;
            top:50%;
            left:30%;
            width:20px;
            height:20px;
            margin:-10px 0 0 -10px;
            background:#085ec5;
            border:1px solid #003c84;
            border-radius: 20px;
            background-image:-webkit-gradient(linear, left top, left bottom, from(#005cc6), to(#003d83));
            background-image:-webkit-linear-gradient(top, #005cc6, #003d83);
            background-image:-moz-linear-gradient(top, #005cc6, #003d83);
            background-image:-o-linear-gradient(top, #005cc6, #003d83);
            background-image:-ms-linear-gradient(top, #005cc6, #003d83);
            background-image:linear-gradient(top, #005cc6, #003d83);
        }
				/*红色圆点*/
        .flickr a::after {
            content:"\00a0";
            position:absolute;
            top:50%;
            right:30%;
            width:20px;
            height:20px;
            margin:-10px -10px 0 0;
            border:1px solid #ba0060;
            background:#fd1e93;
            border-radius:20px;
            background-image:-webkit-gradient(linear, left top, left bottom, from(#fd1e93), to(#cb026c));
            background-image:-moz-linear-gradient(top, #fd1e93, #cb026c);
            background-image: -webkit-linear-gradient(top, #fd1e93, #cb026c);
            background-image: -o-linear-gradient(top, #fd1e93, #cb026c);
            background-image: -ms-linear-gradient(top, #fd1e93, #cb026c);
            background-image: linear-gradient(top, #fd1e93, #cb026c);
        }

Flickr上的两上圆点效果也是通过伪元素实现：“::before”制作了蓝点，“::after”制作了粉红点。

五、Delicious

			.delicious a {
            position:relative;
            border-color:#d2d2d2;    
            text-align:center;
            text-indent:-9000px;
            font-size:108px;
            font-weight:bold;
            color:#fff;
            background:#fff;    
            box-shadow:0 0 4px rgba(0,0,0,0.4);
            background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#d1d1d1));
            background-image:-webkit-linear-gradient(top, #fff, #d1d1d1);
            background-image:-moz-linear-gradient(top, #fff, #d1d1d1);
            background-image:-o-linear-gradient(top, #fff, #d1d1d1);
            background-image:-ms-linear-gradient(top, #fff, #d1d1d1);
            background-image:linear-gradient(top, #fff, #d1d1d1);
        }
				/*右上角蓝色方块*/
        .delicious a::before {
            content:"\00a0";
            position:absolute;
            top:0;
            right:0;
            width:30px;
            height:30px;
            border:1px solid #0060ce;
            background:#085ec5;
            border-radius:0 4px 0 0;
            background-images:-webkit-gradient(linear, left top, left bottom, from(#0060ce)), to(#003b7f));
            background-images:-webkit-linear-gradient(top, #0060ce, #003b7f);
            background-images:-moz-linear-gradient(top, #0060ce, #003b7f);
            background-images:-o-linear-gradient(top, #0060ce, #003b7f);
            background-images:-ms-linear-gradient(top, #0060ce, #003b7f);
            background-images:linear-gradient(top, #0060ce, #003b7f);
        }
				/*左下角黑色方块*/
        .delicious a::after {
            content:"\00a0";
            position:absolute;
            bottom:0;
            left:0;
            width:30px;
            height:30px;
            border:1px solid #000;
            background:#000;
            border-radius: 0 0 0 4px;
            background-image:-webkit-gradient(linear, left top, left bottom, from(#212121), to(#000));
            background-image:-webkit-linear-gradient(top, #212121, #000);
            background-image:-moz-linear-gradient(top, #212121, #000);
            background-image:-o-linear-gradient(top, #212121, #000);
            background-image:-ms-linear-gradient(top, #212121, #000);
            background-image:linear-gradient(top, #212121, #000);
        }

六、Linkedin

			.linkedin a {
            position:relative;
            width:60px;
            overflow:hidden;
            padding:0 2px;
            border-color:#185c80;
            text-transform:lowercase;
            text-indent:-185px;
            font-size:64px;
            font-weight:bold;
            color:#fff;
            background:#0c6596;
            box-shadow:0 0 4px rgba(0,0,0,0.4);
            background-image:-webkit-gradient(linear, left top, left bottom, from(#5babcb), to(#0c6596));
            background-image:-webkit-linear-gradient(top, #5babcb, #0c6596);
            background-image:-moz-linear-gradient(top, #5babcb, #0c6596);
            background-image:-ms-linear-gradient(top, #5babcb, #0c6596);
            background-image:-o-linear-gradient(top, #5babcb, #0c6596);
            background-image:linear-gradient(top, #5babcb, #0c6596);
        }

七、Google

			.google a {
            position:relative;
            border-color:#26478d;
            text-transform:lowercase;
            text-indent:16px;
            letter-spacing:40px;
            font: 65px/44px Georgia, Times New Roman, Times, serif;
            color:#fff;
            background:#1e3c7f;
            box-shadow:0 0 4px rgba(0,0,0,0.4);
            background-image:-webkit-gradient(linear, left top, left bottom, from(#447aec), to(#1e3c7f));
            background-image:-webkit-linear-gradient(top, #447aec, #1e3c7f);
            background-image:-moz-linear-gradient(top, #447aec, #1e3c7f);
            background-image:-o-linear-gradient(top, #447aec, #1e3c7f);
            background-image:-ms-linear-gradient(top, #447aec, #1e3c7f);
            background-image:linear-gradient(top, #447aec, #1e3c7f);
        }

八、Orkut

			.orkut a {
            position:relative;
            border-color:#b4c4dd;
            text-indent:-9000px;
            font-size:108px;
            color:#b62b91;
            background:#fff;
            box-shadow:0 0 4px rgba(0,0,0,0.4);
            background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ceddf6));
            background-image:-webkit-linear-gradient(top, #fff, #ceddf6);
            background-image:-moz-linear-gradient(top, #fff, #ceddf6);
            background-image:-o-linear-gradient(top, #fff, #ceddf6);
            background-image:-ms-linear-gradient(top, #fff, #ceddf6);
            background-image:linear-gradient(top, #fff, #ceddf6);
        }
				/*粉红色圆*/
        .orkut a::before {
            content:"\00a0";
            position:absolute;
            top:50%;
            left:50%;
            width:40px;
            height:40px;
            border:1px solid #b0699e;
            margin:-21px 0 0 -21px;
            background:#d779c0;
            border-radius:40px;
            box-shadow:0 0 2px rgba(0,0,0,0.6);
        }
				/*白色圆*/
        .orkut a::after {
            content:"\00a0";
            position:absolute;
            top:50%;
            left:50%;
            width:26px;
            height:26px;
            margin:-13px 0 0 -13px;
            background:#fff;
            border-radius:26px;
            box-shadow: 0 0 2px rgba(0,0,0,0.6);
            background-image:-webkit-gradient(linear, left top, left bottom, from(#eff4fc), to(#dce6f8));
            background-image:-webkit-linear-gradient(top, #eff4fc, #dce6f8);
            background-image:-moz-linear-gradient(top, #eff4fc, #dce6f8);
            background-image:-o-linear-gradient(top, #eff4fc, #dce6f8);
            background-image:-ms-linear-gradient(top, #eff4fc, #dce6f8);
            background-image:linear-gradient(top, #eff4fc, #dce6f8);
        }

九、Technorati

			.technorati a {
            position:relative;
            border-color:#266F12;
            text-indent:-9000px;
            font-size:108px;
            color:#b62b91;
            background:#086B04;     
            box-shadow:0 0 4px rgba(0,0,0,0.4);
            background-image:-webkit-gradient(linear, left top, left bottom, from(#a3d679), to(#086b04));
            background-image:-webkit-linear-gradient(top, #a3d679, #086b04);
            background-image:-moz-linear-gradient(top, #a3d679, #086b04);
            background-image:-o-linear-gradient(top, #a3d679, #086b04);
            background-image:-ms-linear-gradient(top, #a3d679, #086b04);
            background-image:linear-gradient(top, #a3d679, #086b04);
        }
				/*白色圆*/
        .technorati a::before {
            content:"\00a0";
            position:absolute;
            top:5px;
            right:-5px;
            width:40px;
            height:25px;
            border:8px solid #f5f5f5;
            border-radius:45px / 35px;
            box-shadow:0 0 2px rgba(0,0,0,0.6);
        }
				/*白色三角*/
        .technorati a::after {
            content:"\00a0";
            position:absolute;
            top:40px;
            left:20px;
            width:0;
            height:0;
            border-width:0 0 18px 13px;
            border-style:solid;
            border-color:transparent #f5f5f5;
        }

十、Netvibes

			.netvibes a {
            position:relative;
            border-color:#0c5f0c;
            text-align:center;
            text-indent:-9000px;
            font-size: 178px;
            font-weight:bold;
            color:#fff;
            background:#138210;
            box-shadow:0 0 4px rgba(0,0,0,0.4);
            background-image:-webkit-gradient(linear, left top, left bottom, from(#68db21), to(#138210));
            background-image:-webkit-linear-gradient(top, #68db21, #138210);
            background-image:-moz-linear-gradient(top, #68db21, #138210);
            background-image:-o-linear-gradient(top, #68db21, #138210);
            background-image:-ms-linear-gradient(top, #68db21, #138210);
            background-image:linear-gradient(top, #68db21, #138210);
        }
				/*白色+号*/
        .netvibes a::after {
            content:"+";
            position:absolute;
            left:0;
            top:0;
            width:64px;
            text-indent:0;
            text-align:center;    
            font-size:88px;
            color:#fff;
        }

十一、Google+

			.google-plus a {
            position:relative;
            border-color:#C4695F;
            text-transform:lowercase;
            text-indent:-5px;
            letter-spacing:40px;
            font: 96px/31px Georgia, Times New Roman, Times, serif;
            color:#fff;
            background:#1e3c7f;
            box-shadow:0 0 4px rgba(0,0,0,0.4);
            background-image:-webkit-gradient(linear, left top, left bottom, from(#D43D2A), to(#A92B1D));
            background-image:-webkit-linear-gradient(top, #D43D2A, #A92B1D);
            background-image:-moz-linear-gradient(top, #D43D2A, #A92B1D);
            background-image:-o-linear-gradient(top, #D43D2A, #A92B1D);
            background-image:-ms-linear-gradient(top, #D43D2A, #A92B1D);
            background-image:linear-gradient(top, #D43D2A, #A92B1D);
        }
				/*右边+号*/
        .google-plus a::before {
            content: "+";
            font-size: 46px;
            left: 43px;
            position: absolute;
            top: -6px;
        }

十二、Yahoo

			.yahoo a {
            position:relative;
            border-color:#971278;
            text-transform:uppercase;
            text-indent:3px;
            letter-spacing:40px;
            font: 65px/66px Georgia, Times New Roman, Times, serif;
            color:#fff;
            background:#1e3c7f;
            box-shadow:0 0 4px rgba(0,0,0,0.4);
            background-image:-webkit-gradient(linear, left top, left bottom, from(#C639C2), to(#9E2999));
            background-image:-webkit-linear-gradient(top, #C639C2, #9E2999);
            background-image:-moz-linear-gradient(top, #C639C2, #9E2999);
            background-image:-o-linear-gradient(top, #C639C2, #9E2999);
            background-image:-ms-linear-gradient(top, #C639C2, #9E2999);
            background-image:linear-gradient(top, #C639C2, #9E2999);
        }
				/*右边！号*/
        .yahoo a::before {
            -moz-transform: rotate(19deg);
            -webkit-transform: rotate(19deg);
            -ms-transform: rotate(19deg);
            -o-transform: rotate(19deg);
            transform: rotate(19deg);
            content: "!";
            font-family: Arial;
            left: 34px;
            position: absolute;
            top: 7px;
        }

十三、Tumblr

			.tumblr a {
            position: relative;
            border-color: #425B6E;
            text-indent: 24px;
            letter-spacing: 40px;
            font:  60px/1 Tahoma,sans-serif;
            line-height: 60px;
            background: #daf6f7;
            text-shadow: 1px 0px 1px #FFFFFF, -2px -1px 1px #FFFFFF, 0px -1px 1px #FFFFFF, -2px -1px 1px #FFFFFF;
            box-shadow: 0 0 4px rgba(0,0,0,0.4);
            background-image: -webkit-gradient(linear, left top,left bottom,from(#29486A),to(#253F5B));
            background-image: -webkit-linear-gradient(top,#29486A,#253F5B);
            background-image: -moz-linear-gradient(top,#29486A,#253F5B);
            background-image: -o-linear-gradient(top,#29486A,#253F5B);
            background-image: -ms-linear-gradient(top,#29486A,#253F5B);
            background-image: linear-gradient(top,#29486A,#253F5B);
            text-transform: lowercase;
            color: #fff;
        }

上面给大家展示的是共享按钮中的十三个效果而以，大家也可以发挥自己的想像和创造力，去绘制更多的效果，就当是练习CSS3的属性运用吧。下面在给大家展示一个由TjRus用纯CSS3制作的iPhone4手机模型：

上面DEMO纯样式制作，没有图片的，是不是更让你自叹了，其实没事的，你要相信自己，总有一天自己也行。如果你想一控究竟，那就快动手吧。

那么今天就说到这了，希望大家喜欢这个教程，如果你有更好的创建不仿在下面的评论中留下您的足迹与大家一起分享。

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

上一篇: CSS3和jQuery制作翻转表单 | 下一篇: css3制作3D分页导航

w3cplus

CSS3制作分享按钮

HTML Markup

Base Css

一、Facebook

二、Twitter

三、RSS

四、Flickr

五、Delicious

六、Linkedin

七、Google

八、Orkut

九、Technorati

十、Netvibes

十一、Google+

十二、Yahoo

十三、Tumblr

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品

w3cplus

你在这里

CSS3制作分享按钮

HTML Markup

Base Css

一、Facebook

二、Twitter

三、RSS

四、Flickr

五、Delicious

六、Linkedin

七、Google

八、Orkut

九、Technorati

十、Netvibes

十一、Google+

十二、Yahoo

十三、Tumblr

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品