CSS3真的很神奇。它使网页设计师能够创建灵活和易于重用的设计元素，并减少我们对图像和图形编辑器的依赖。这是一个指南，向您展示如何使用CSS3, HTML和一些免费的社交媒体图标创建时尚的社交媒体按钮。
灵感
有一天，我偶然发现了路易斯·哈波的个人网站Graphicpeel，我注意到他在网站“关于”页面底部有一些简单但设计精美的社交媒体按钮。我心想，这些都很好，但我打赌我可以用CSS3这样做．然后我就走了!
超文本标记语言
首先，我们将使用一些简单的HTML来奠定基础。我们想要创建一个div它将包含我们的按钮，它的类名为插图．然后我们想要使用一个无序列表(< ul >)，每个按钮都是一个列表项(<李>)．
在每个<李>标签，我们将有一个链接(<一>)．每个链接都有一个< img >里面有一个社交媒体图标，还有一个< span >按住按钮的文本(将是“LinkedIn”，“Facebook”，等等)。我使用的社交媒体图标来自Handycons 2和108免费哑光白方社交网络图标。
我们可以给出跨度的类名的元素网站以便以后能够对它们进行样式设计。你的HTML应该看起来像下面这样:
< div类= "嵌入">
- (电子邮件保护)">
类= "网站">E-Mail -
-
-
-
CSS
大部分代码将使用CSS格式。我们将先介绍基本的样式规则，然后逐步建立我们的按钮。
基本的CSS
让我们给我们的按钮一些基本的样式。下面的代码块只是使用CSS2规范，这将为不支持CSS3规范的浏览器提供一个很好的退路(渐进增强)。下面是不言自明的:我们只是设置列表项的样式，使它们看起来像并排排列的方正按钮(使用显示:块而且浮:左)．
. insert {font-family: Helvetica, Verdana, Arial, sans-serif;字体大小:14 px;list-style-type:没有;Margin: 10px 0 0 10px;} .inset ul {list-style-type: none;显示:块;} .inset li {float: left;高度:30 px;Margin: 0 8px 7px 0;} .inset li a {background-color:灰色; color: #424242; float: left; font-size: 16px; font-weight: bold; height: 24px; padding-left: 27px; padding-top: 6px; position: relative; text-decoration: none; border: 1px solid #bfc1c6; } .inset li a:hover { border: 1px solid #b4b7bb; } .inset li a img { height: 16px; left: 7px; margin-right: 7px; position: absolute; top: 7px; width: 16px; border: none; } .inset li a span { display: block; height: 22px; padding-right: 7px; overflow: hidden;/*宽度:70px;取消注释以添加固定宽度*/}。网站{ font-size: 14px; line-height: 20px; }
到目前为止，我们已经很无聊了;但这是意料之中的，因为我们还没有使用任何CSS3。
圆角与CSS3
为了使这些按钮看起来更有风格，让我们给它们一些圆角这个特性财产。请记住，我们必须使用Mozilla (-moz -适用于Firefox、SeaMonkey和Flock等浏览器)和WebKit (webkit -Safari和Chrome等浏览器)。其他浏览器，如Opera和IE9会认出这个特性属性，不带供应商前缀。
属性中添加这些属性.inset li选择器:
/*使用Gecko布局引擎的Mozilla浏览器*/-moz-border-radius: 5 px;/*使用WebKit布局引擎的Safari和Chrome */-webkit-border-radius: 5 px;/* W3C CSS 3.0级规范。适用于Opera和IE9 */border - radius: 5 px;
颜色梯度与CSS3
使用CSS3渐变，我们可以做一些非常酷的事情，否则需要在图形编辑器(如Photoshop)中创建CSS背景图像。CSS3渐变允许我们向任何HTML元素添加颜色渐变，这可以产生许多有趣的东西，如CSS3设计模式和解释性渲染，如圣诞装饰物．为了在我们的按钮上创建渐变，我们将使用渐变值语法(即。
线性梯度()而且梯度())分配给背景财产。Mozilla浏览器和WebKit浏览器的实现是不同的，所以尽管我们试图做同样的事情，但每个浏览器布局引擎的代码将是不同的。注意，对于Mozilla (-moz -)，我使用百分比，而对于WebKit (webkit -我必须用小数;Mozilla中的1%在WebKit中等于0.01,Mozilla中的10%在WebKit中等于。10，依此类推。
将这些样式添加到.inset li选择器:
/*使用Gecko布局引擎的Mozilla浏览器*/背景:-moz-linear-gradient(#a5a7aa， #bec1c5 1%， #d8dbdf 10%， #d8dbdf);/*使用WebKit布局引擎的Safari和Chrome */背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#a5a7aa)，颜色停止(。01 # bec1c5)、颜色(。10， #d8dbdf)，color-stop(1， #d8dbdf));
样式化:hover伪类
让我们继续，改变用户悬停在按钮上时按钮的外观。当用户将鼠标移到其中一个按钮上时，通过稍微改变渐变颜色，我们可以给她一个可以点击的视觉提示。如果你想让这些在视觉上更吸引人，你可以尝试CSS3变换功能。
将这些样式添加到.inset li a:悬停选择器:
背景:-moz-linear-gradient(#9c9fa2， #b4b7bb 1%， #cdd0d5 10%， #cdd0d5);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#9c9fa2)，颜色停止(。01 # b4b7bb)、颜色(。10， #cdd0d5)，color-stop(1， #cdd0d5));
在下图中，我将鼠标悬停在电子邮件按钮。如你所见，它比其他的稍微暗一些。
替代结果:“开始”按钮与不同的颜色
为了演示CSS3提供的灵活性，让我们使用相同的HTML结构创建不同版本的按钮。
超文本标记语言
在本例中，我们需要更改包含div从插图来outset-colored．此外，由于每个按钮将是不同的颜色，我们还必须给它们一个唯一的类。我们可以将这些类分配给<一>标签;例如，Facebook将会有类=“facebook”．
您可能想知道为什么我选择使用class属性而不是ID属性:这是因为我想说明同一类的多个按钮可以出现在同一页面上的情况。下面是HTML:
< div类= " outset-colored ">
- (电子邮件保护)title="我的电子邮件"类= "电子邮件">
E-Mail
- 类= " linkedin ">
LinkedIn
- 类=“facebook”>
Facebook - 类=“推特”>
Twitter - 类= " flickr "> < img src = "图片/ flickr_white.png”alt = " Flickr图标" / > <跨类= >“网站”Flickr < / span > < / > < /李> < / ul > < / div >
CSS
CSS比原来的要长，但这是因为每个按钮都有不同的颜色。使用的CSS3非常相似;替代结果只是渐变有不同的颜色值。下面是替代结果的CSS:
/*彩色开始按钮*/. start -colored {font-family: Helvetica, Verdana, Arial, sans-serif;字体大小:14 px;list-style-type:没有;Margin: 10px 0 0 10px;} . start -colored ul {list-style-type: none;显示:块;} . start -colored li{浮动:左;高度:30 px;Margin: 0 8px 7px 0;} . start -colored li a {color: #424242; float: left; font-size: 16px; font-weight: bold; height: 24px; padding-left: 27px; padding-top: 6px; position: relative; text-decoration: none; border: 1px solid #bfc1c6; border-radius: 5px; background-color: #D8D9DD; -moz-border-radius: 5px; -webkit-border-radius: 5px; }/* email */. start -colored li a.email {background: -moz-linear-gradient(#ff6666， #cc0000 10%， #c40202);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#ff6666)，颜色停止(。10， #cc0000)，color-stop(1， #c40202));颜色:# f3f3f3;边框:1px实体#c40202;} . start -colored li a:悬停。Email {background: -moz-linear-gradient(#c40202， #cc0000 1%， #e03434 10%， #e03434);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#c40202)，颜色停止(。01 # cc0000)、颜色(。10， #e03434)，color-stop(1， #e03434));｝/* linkedin */. start -colored li a.linkedin {background: -moz-linear-gradient(#7cd0fb， #38a5dc 10%， #2c83ae);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#7cd0fb)，颜色停止(。10， #38a5dc)，color-stop(1， #2c83ae));颜色:# f3f3f3;边框:1px实体#2c83ae;} . start -colored li a:悬停。Linkedin {background: -moz-linear-gradient(#2c83ae， #38a5dc 1%， #41b9f6 10%， #41b9f6);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#2c83ae)，颜色停止(。01 # 38 a5dc)、颜色(。10， #41b9f6)，color-stop(1， #41b9f6));｝/* facebook */. start -colored li a.facebook {background: -moz-linear-gradient(#7aa3f7， #4c72c3 10%， #3b5998);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#7aa3f7)，颜色停止(。10， #4c72c3)，color-stop(1， #3b5998));颜色:# f3f3f3;边框:1px实体#3b5998;} . start -colored li a:悬停。Facebook {background: -moz-linear-gradient(#3b5998， #4c72c3 1%， #5c8aea 10%， #5c8aea);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#3b5998)，颜色停止(。01, # 4 c72c3)、颜色(。10， #5c8aea)，color-stop(1， #5c8aea));｝/* twitter */. start -colored li a.twitter {background: -moz-linear-gradient(#8ae0fd， #24bce6 10%， #1e9ec1);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#8ae0fd)，颜色停止(。10， #24bce6)，color-stop(1， #1e9ec1));颜色:# f3f3f3;边框:1px实体#1e9ec1;} . start -colored li a:悬停。Twitter {background: -moz-linear-gradient(#1e9ec1， #24bce6 1%， #33ccff 10%， #33ccff);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#24bce6)，颜色停止(。01 # 33 ccff)、颜色(。10， #33ccff)，color-stop(1， #33ccff));｝/* flickr */. start -colored li .flickr {background: -moz-linear-gradient(#fc75ba， #e10374 10%， #c10263);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#fc75ba)，颜色停止(。10， #e10374)，color-stop(1， #c10263));颜色:# f3f3f3;边框:1px实体#c10263;} . start -colored li a:悬停。Flickr {background: -moz-linear-gradient(#c10263， #e10374 1%， #ff0283 10%， #ff0283);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#c10263)，颜色停止(。01 # e10374)、颜色(。10， #ff0283)，color-stop(1， #ff0283));} . start -colored li a img{高度:16px;左:7 px; margin-right: 7px; position: absolute; top: 7px; width: 16px; border: none; } .outset-colored li a span { display: block; height: 22px; padding-right: 7px; overflow: hidden;/ *宽度:70 px;如果你想要所有的按钮都是相同的大小，在这里添加一个宽度}。网站{ font-size: 14px; line-height: 20px; }
相关内容
