CSS3制作分享按钮

发布于 大漠

Nicolas GallagherPure 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

UA Air Jordan 1