css去掉按钮默认样式教程_CSS3教程：创建一个流畅的开/关按钮

到目前为止，使用按钮是与电子设备进行交互的首选方式。 例如收音机，电视，音乐播放器，甚至具有语音命令功能的智能手机 ，仍然至少需要一个或两个物理按钮。

此外，在这个数字时代， 按钮也已经以其数字形式发展，与物理按钮相比，它变得更具交互性，动态性和真实性。

因此，这次，我们将基于Dribbble上仅使用CSS的 出色设计创建一个光滑且交互式的按钮。

好吧，让我们开始吧。

HTML

我们将通过在HTML文档中放置以下标记来开始该按钮。 这非常简单，按钮将基于锚标记，我们旁边还有一个span以创建指示灯，然后将它们包装在HTML5 section标记中。

<section>
	<a target="_blank" href="#button" id="button">&#xF011;</a>
	<span></span>
</section>

这是我们的按钮最初的外观。

基本样式

在本节中，我们将开始研究Styles 。

我们首先将来自“微妙图案”的深色背景应用到正文文档中，并将该section居中。 然后，我们还将删除:focus和:active链接上的虚线outline 。

body {
	background: url('images/micro_carbon.png');
}
section {
	margin: 150px auto 0;
	width: 75px;
	height: 95px;
	position: relative;
	text-align: center;
}
:active, :focus {
	outline: 0;
}

使用自定义字体

对于按钮的图标，我们将使用Font Awesome的自定义字体，而不是图像。 这样，通过样式表，图标将易于样式化和缩放。

@font-face {
  font-family: "FontAwesome";
  src: url("fonts/fontawesome-webfont.eot");
  src: url("fonts/fontawesome-webfont.eot?#iefix") format('eot'), 
  	   url("fonts/fontawesome-webfont.woff") format('woff'), 
  	   url("fonts/fontawesome-webfont.ttf") format('truetype'), 
  	   url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');
  font-weight: normal;
  font-style: normal;
}

我们需要此按钮的电源图标以Unicode数字F011表示； 如果您仔细看一下上面HTML标记，我们将这个数字字符 在anchor标签中，但是由于我们尚未在按钮样式中定义自定义font-family ，因此该图标尚未正确呈现。

样式按钮

首先，我们需要为按钮定义自定义font-family 。

我们的按钮将是一个圆形，我们可以使用border-radius属性实现圆形效果，并将其值至少设置为按钮width一半。

由于我们在图标上使用了字体，因此我们可以轻松地设置color并在样式表中为图标添加text-shadow 。

接下来，我们还将为按钮创建一个斜角效果。 这种效果非常棘手。 首先，我们需要应用background-color: rgb(83,87,93); 对于按钮的颜色基数，则我们最多添加四层box-shadows 。

a {
	font-family: "FontAwesome";
	color: rgb(37,37,37);
	text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
	font-size: 32pt;
	display: block;
	position: relative;
	text-decoration: none;
	background-color: rgb(83,87,93);
    box-shadow: 0px 3px 0px 0px rgb(34,34,34), /* 1st Shadow */
    			0px 7px 10px 0px rgb(17,17,17), /* 1nd Shadow */
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */ 
    			inset 0px -12px 35px 0px rgba(0, 0, 0, .5); /* 4th Shadow */
	width: 70px;
	height: 70px;
	border: 0;
	border-radius: 35px;
	text-align: center;
	line-height: 79px;
}

在按钮的外部还有一个较大的圆圈，我们将使用:before 伪元素 ，而不是添加额外的标记。

a:before {
	content: "";
	width: 80px;
	height: 80px;
	display: block;
	z-index: -2;
	position: absolute;
	background-color: rgb(26,27,29);
	left: -5px;
	top: -2px;
	border-radius: 40px;
	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1), 
			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}

指示灯

在按钮下方，有一个很小的指示灯可以指示“电源打开”和“关闭”状态。 在下面，我们将红色用作灯的颜色，因为电源最初是关闭的，我们还添加了box-shadow以模仿灯的闪烁效果。

a + span {
	display: block;
	width: 8px;
	height: 8px;
	background-color: rgb(226,0,0);
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
				0px 0px 3px 2px rgba(226,0,0,0.5);
 	border-radius: 4px;
 	clear: both;
 	position: absolute;
 	bottom: 0;
 	left: 42%;
}

效果

此时，我们的按钮开始看起来不错，我们只需要在其上添加一些效果即可，例如，当“单击”按钮时，我们希望按钮看起来像是被按下并按住了。

为达到此效果，按钮中的第一个box-shadow将被清零，并且位置将降低一点。 我们还需要稍微调整其他三个阴影的强度以匹配按钮位置。

a:active {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34), /* 1st Shadow */
    			0px 3px 7px 0px rgb(17,17,17), /* 2nd Shadow */
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */ 
    			inset 0px -10px 35px 5px rgba(0, 0, 0, .5); /* 4th Shadow */
    background-color: rgb(83,87,93);
  	top: 3px;
}

此外，单击按钮后，应保持按下状态，并且图标应“发光”以指示电源已打开。

为了达到这样的效果，我们将使用:target 伪类将按钮作为:target ，然后将图标的颜色更改为白色，并添加带有白色的text-shadow 。

a:target {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
    			0px 3px 7px 0px rgb(17,17,17), 
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
    			inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
    background-color: rgb(83,87,93);
  	top: 3px;
  	color: #fff;
  	text-shadow: 0px 0px 3px rgb(250,250,250);
}

我们还需要调整按钮外部圆圈中的box-shadow ，如下所示。

a:active:before, a:target:before {
	top: -5px;
	background-color: rgb(26,27,29);
	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1), 
			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}

指示灯将从默认的红色变为绿色，以强调电源已打开。

a:target + span {
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
				0px 0px 3px 2px rgba(135,187,83,0.5);
	background-color: rgb(135,187,83);
}

过渡效应

最后，为使按钮的效果平稳运行，我们还将应用以下过渡效果。

下面的代码片段将在锚元素中将过渡特地添加到color属性和text-shadow持续350ms 。

a {
transition: color 350ms, text-shadow 350ms;
	-o-transition: color 350ms, text-shadow 350ms;
	-moz-transition: color 350ms, text-shadow 350ms;
	-webkit-transition: color 350ms, text-shadow 350ms;
}

下面的第二个片段将在灯光指示器中添加background-color和box-shadow属性的过渡。

a:target + span {
transition: background-color 350ms, box-shadow 700ms;
	-o-transition: background-color 350ms, box-shadow 700ms;
	-moz-transition: background-color 350ms, box-shadow 700ms;
	-webkit-transition: background-color 350ms, box-shadow 700ms;
}

最后结果

我们已经介绍了所需的所有样式，现在您可以实时查看最终结果并从下面的链接下载源文件。

• 演示版
• 下载源

奖励：如何关闭

奖金来了。 如果您尝试了以上演示中的按钮，您会注意到该按钮只能被单击一次，即可以将其打开，那么如何关闭它呢？

不幸的是，我们必须使用jQuery，但这确实很简单。 以下是我们需要的所有jQuery代码。

$(document).ready(function(){
	$('#button').click(function(){
		$(this).toggleClass('on');
	});
});

上面的代码片段将在锚中添加类ON，我们使用了jQuery中的toggleClass函数将其添加。 因此，当单击#button时，jQuery将检查是否已添加ON类：如果未添加，则jQuery将添加该类，如果已添加，则jQuery将删除该类。

现在我们需要稍微更改一下样式。 只需使用.on类选择器替换所有:target 伪元素 ，如下所示：

a.on {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
    			0px 3px 7px 0px rgb(17,17,17), 
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
    			inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
    background-color: rgb(83,87,93);
  	top: 3px;
 	color: #fff;
  	text-shadow: 0px 0px 3px rgb(250,250,250);
}
a:active:before, a.on:before {
	top: -5px;
	background-color: rgb(26,27,29);
	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1), 
			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
a.on + span {
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
				0px 0px 3px 2px rgba(135,187,83,0.5);
	background-color: rgb(135,187,83);
}

最后，让我们在浏览器中尝试一下。

• 演示版
• 下载源

翻译自: https://www.hongkiat.com/blog/css3-on-off-button/