css按钮按下改按钮颜色
嗨! 我有个快速提示。 使用纯CSS3的一些真正很棒的可按下社交媒体按钮怎么样? 听起来很不错……今天就是您要存储的东西。 我将向您展示如何创建一些非常酷的按钮,您可以将其放置在任何项目中,让我们开始吧!
第1步:制作一些HTML标记
这里的标记非常简单,简洁,只需要几行代码。
对于我们的主类,我们将使用.container,仅当您希望自己的外观与本教程完全相同时才使用。 我们使用它来将按钮放置在画布的中央。
接下来,我们将使用跨度来包装按钮,并使用类.button在CSS文件中使用边距创建一些间距。
最后,我们将简单地添加一个链接,一个图标和一些要放在按钮上的文本。
<div class="container">
<span class="button fb">
<a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/167_QuickTip_CSS3Buttons/images/fb.gif" alt="" />Like It</a>
</span>
<span class="button twit">
<a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/167_QuickTip_CSS3Buttons/images/tweet.gif" alt="" />Tweet It</a>
</span>
<span class="button mail">
<a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/167_QuickTip_CSS3Buttons/images/mail.gif" alt="" />Email</a>
</span>
</div>
以上就是CSS3按钮HTML标记,您现在应该有了类似的东西...
第2步创建一些很棒的样式!
我们要添加的第一件事是具有漂亮的蓝色砾石背景的主体,可以在源文件中找到它。 然后,我们将颜色设置在链接上,并对容器进行样式设置,以使margin:0 auto在画布上居中。
将按钮放在自己的项目中时,这三种样式都不是必需的,但是您可能希望为它们创建特定的链接样式,并且可以使用.button> a来定位它。
body{
background: url(../images/bg.jpg) repeat 0 0;
}
a{
text-decoration: none;
color:#333333;
}
.container{
width: 420px;
margin: 10% auto 0; /* buttons pushed from the top by 10% */
}
现在让我们在按钮之间创建一些间距,如下所示:
.button{
margin: 8px;
}
“以用户希望按下按钮的方式来设置按钮的样式。”
现在我们有了一些不错的间距,我们可以开始以用户希望按下按钮的方式来设置按钮样式。
通过创建一个漂亮的渐变色和一个盒子阴影,我们可以使按钮弹出一点,使其更具可点击性。 然后,在顶部,底部和侧面添加一些填充,使按钮更易于阅读。
.button a{
font-family:font-family: 'Arvo', arial, serif;;
font-size:16px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #dfdfdf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* W3C */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 3px 4px -1px #464646;
-webkit-box-shadow: 0 3px 4px -1px #464646;
box-shadow: 0 3px 4px -1px #464646;
padding: 6px 12px;
}
现在,我们继续使用:hover选择器将按钮稍微展平,使其看起来处于按下状态。 我们还将使用:focus选择器,以便我们可以保留这些样式,而不必重复该状态的代码。
.button a:hover, .button a:focus{
background: #dfdfdf; /* Old browsers */
background: -moz-linear-gradient(top, #dfdfdf 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* W3C */
-moz-box-shadow: 0 1px 1px 0 #666666;
-webkit-box-shadow: 0 1px 1px 0 #666666;
box-shadow: 0 1px 1px 0 #666666;
}
右侧的按钮是悬停状态的外观。
创建悬停效果后,当用户单击鼠标时,我们将在按钮上添加一些插图,使其看起来就像用户将按钮按入背景一样。 在这种技术中,我们需要使用两个阴影,并且只需在每个阴影之间放置一个逗号即可。 支持多个阴影
.button a:focus{
-moz-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
-webkit-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
}
此时,您应该具有下图所示的图像,带有插入按钮或聚焦状态(示例左按钮)。
最后,我们在图标和按钮文本之间放置了一个正确的填充,然后需要向下移动图标以使其对齐,并在不干扰其他元素的情况下做到这一点,最好的解决方案是放置一个相对位置以保持它包含在.button中,然后将其从顶部向下推2个像素。 通过使用top而不是padding-top或margin-top,我们只影响图像而不是整个按钮。
.button a > img{
padding-right: 8px;
position: relative;
top: 2px;
}
好的,就是样式了,您应该最终得到这样的东西...
如果您的图片与上图不完全相同,请返回并检查您的作品。
这就是她写的全部...
很好! 您已经创建了一些非常棒CSS3按钮,这些按钮使用户想要采取行动。 感谢您的参与,我衷心希望您在本课程中学到了一些新的宝贵知识。
请继续关注更多教程,以您的方式来做。 您也可以在作者简介下方的Envato市场上查看我的一些产品。
请在下面留下任何问题或评论。
翻译自: https://webdesign.tutsplus.com/articles/quicktip-pressable-css3-social-buttons--webdesign-3330
css按钮按下改按钮颜色