您的位置：首页 > Web前端 > CSS

用CSS3/JS绘制自己想要的按钮

2017-06-17 17:24 232 查看

我认为按钮的绘制分以下三个步骤

第一步，绘制按钮的轮廓

选择合适的html标签，设置轮廓的CSS

/* html代码 */
<a href="#" class="button off"></a>
body{
background-color: #E6C9B6;
}

/* CSS样式 */
/* 按钮轮廓 */
.button{
display: block;
margin:100px auto;
position: relative;
width:100px;
height:40px;
border-radius: 50px;
border:1px solid #fff;
background-color: #E9E4E0;
}

效果图

仿IOS-1.jpg

第二步，绘制按钮的默认状态

这一步很重要，由于我们不会再给html文件添加其他的标签，所以我们需要用 :after 伪类对按钮进行CSS渲染

/* 接在上面继续写 */
.button:after{
display: block;
position: absolute;    //相对按钮的轮廓进行决定定位
top:2px;
bottom: 2px;        //即设置top,又设置bottom使元素自动拉伸到最大
left:2px;           //实际上，按钮的宽度即为容器的高度-(top+bottom)
width:36px;           //按钮的宽度
line-height: 36px;    //按钮文字的高度，如果不需要文字，可移除
text-align: center;
text-transform: uppercase;
font-size: 16px;
background-color: #fff;      //这里的背景颜色是按钮的背景颜色
border:2px solid;
transition: all 500ms;        //按钮的动画时长
}

实际上，做到这一步之后会发现，在浏览器上的效果没有一点变化，还是之前的那样子，不过不用着急，我们再加一点东西就很明显了

在轮廓内添加小按钮

.off:after {
content: 'off';
border-radius:30px;
color: #999;
}

默认为off状态

仿IOS-2.jpg

- 再接着绘制要切换的状态

.on:after {
content: 'ON';
border-radius:30px;
transform: translate(56px, 0);
color:transparent;
background-color:#4BD429;
}

仿IOS-3.jpg

最后一步，写JS代码进行切换

实际上，在CSS的切换之中，toggleClass是最为方便的。
但是！！！
这种切换方法不能切换你要触发的JS事件，
毕竟，我们画按钮是为了完成某些功能，
所以我采用的是这种方式,但也许并不是最好的

var zn=0;
$('.button').click(function(e){
if(zn==1){
$(this).removeClass("on").addClass("off");
//此处可填要触发的事件
zn=0;
}else{
$(this).removeClass("off").addClass("on");
//此处可填要触发的事件
zn=1;
}
});

到此，一个完整的开关按钮就绘制完成了
感谢你能花3~5分钟的时间阅览我不专业的教程

PS:昨天要绘制一个按钮控制灯泡的开关（实际上就是切换背景图片），然后我四周一看，看到了墙壁上的一个公牛开关，既然是控制电灯的，我就想玩一玩仿真开关，忍着中午的睡意，还真勉强的给绘制出来了

绘制过程并不复杂，我也就不细说了，贴下效果图和代码，感兴趣的可以自行看一下

仿真开关.jpg

仿真-2.jpg

PS:我引用了一个初始化的CSS文件，可能需要
box-sizing:border-box;

<style type="text/css">
/*开关的轮廓*/
.button{
display: block;
position: relative;
width:160px;
height:180px;
border-radius: 5px;
background-color: #f1f1f1;
}
.button2{
display: block;
position: relative;
width:160px;
height:180px;
border-radius: 5px;
background-color: #f1f1f1;
}
/*指示灯*/
.indicate{
display: block;
position: absolute;
margin:60px 0 0 70px;
width: 20px;
height: 4px;
border-radius: 2px;
background-color: #A8C1C2;
z-index: 1;
transition: all 200ms;
}
.indicate_yes{
margin:69px 0 0 70px;
background-color: #A3D7E7;
}
/*开关内部的小按钮*/
.button:after{
display: block;
position: absolute;
top:40px;
bottom: 40px;
left:20px;
right:20px;
line-height: 52px;
border:1px solid #FFF;
transition: all 200ms;
}
.button2:after{
display: block;
position: absolute;
top:49px;
bottom: 31px;
left:20px;
right:20px;
line-height: 52px;
border:1px solid #FFF;
transition: all 200ms;
}
/*默认状态的小按钮*/
.on:after {
content: '';
border-radius: 5px;
/* CSS3的颜色渐变凸显按钮的凸出感 */
background: linear-gradient(#fff, #f2f2f2 80%,#fff);
/* CSS3的影音的综合应用，绘制按钮的边缘，给予立体感 */
box-shadow: 0 1px 0 0 #fff,
0 3px 0.5px 0 #E7E9EA,
0 5px 0.5px 0 #DEDFDF,
0 6px 0.5px 0 #CCCCCD,
0 7px 0.5px 0 #C5C7C7,
0 8px 2px 0 #818283,
0 9px 2px 0 #A7A8A8;
}
/*关闭后的小按钮*/
.off:after {
content: '';
border-radius: 5px;
background: linear-gradient(#fff, #f2f2f2 80%,#fff);
box-shadow: 0 -1px 0 0 #fff,
0 -3px 0.5px 0 #E7E9EA,
0 -5px 0.5px 0 #DEDFDF,
0 -6px 0.5px 0 #CCCCCD,
0 -7px 0.5px 0 #C5C7C7,
0 -8px 2px 0 #818283,
0 -9px 2px 0 #A7A8A8;
}
</style>

/* JS代码 */
<script type="text/javascript">
$('.button').click(function(e) {
var toggle = this;
e.preventDefault();
$(toggle).toggleClass('on')
.toggleClass('off')
.toggleClass("button2");
//指示灯亮/灭
$(this).children(".indicate")
.toggleClass("indicate_yes");
});

//localStorage.clear();
</script>

[/code]

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航