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标记,我们将这个数字字符&#xF011; 在anchor标签中,但是由于我们尚未在按钮样式中定义自定义font-family ,因此该图标尚未正确呈现。

样式按钮

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

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

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

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

css3开/关按钮
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-colorbox-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/

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值