css按钮按下改按钮颜色_快速提示：可按下CSS3社交按钮

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按钮按下改按钮颜色