如何使用HTML5+css3制作出12种常用的按钮开关样式
导读：使用HTML5+css3制作按钮开关的原理 根据设计的要求填充各种颜色。 按钮开关的形状需要具体问题具体分析，如圆形按钮开关需要用到border-radius语句，方形可以直接使用div设置等。 鼠标悬停的时候光标样式的转换也是...
使用HTML5+css3制作按钮开关的原理
根据设计的要求填充各种颜色。
按钮开关的形状需要具体问题具体分析，如圆形按钮开关需要用到border-radius语句，方形可以直接使用div设置等。
鼠标悬停的时候光标样式的转换也是注重设计感的体现，这里我们着重介绍一下cursor的用法：
cursor属性规定要显示的光标的类型，该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状，根据W3C标准，现在市面上的几乎所有浏览器都兼容cursor属性，所以不要担心与浏览器的兼容问题。
cursor属性的用法如下表所示
微信截图_20180928094755.png
本文所示12种按钮开关样式分别为：div按钮，默认按钮，链接按钮，圆角按钮，输入框按钮，悬停变色按钮，阴影按钮，悬停出现按钮，禁用按钮，箭头标记按钮，波纹按钮和按压效果按钮。
使用HTML5+css3制作按钮开关的代码
各式各样的按钮
*{
margin:0;
padding:0;
}
.wrap{
width:600px;
height:400px;
margin:0auto;
/*background:pink;
*/
padding:30px50px;
}
/*div按钮*/
.button5{
width:100px;
height:30px;
float:left;
/*position:absolute;
*/
text-align:center;
padding-top:10px;
margin:0px10px;
background:greenyellow;
border:1pxsolidplum;
cursor:pointer;
border-radius:50%;
}
/*链接按钮*/
.button2{
background:gold;
border:1pxsolidgreenyellow;
text-decoration:none;
display:inline-block;
padding:10px22px;
border-radius:20px;
/*cursor:pointer;
靠近按钮的一只手*/
}
/*按钮*/
.button3{
background:pink;
border:1pxsolidblueviolet;
padding:10px28px;
cursor:pointer;
color:yellow;
border-radius:40%;
}
/*输入框按钮*/
.button4{
background:cornflowerblue;
border:3pxsolidyellow;
padding:10px20px;
border-radius:20%;
outline-style:none;
/*去除点击时外部框线*/
}
/*悬停变色按钮*/
.button6{
background:plum;
color:greenyellow;
border:1pxsoliddodgerblue;
transition-duration:1s;
/*过渡时间*/
border-radius:12px;
padding:13px18px;
margin-top:20px;
outline-style:none;
/*去除点击时外部框线*/
}
.button6:hover{
background:yellow;
color:magenta;
transition-duration:1s;
}
/*阴影按钮*/
.button7{
/*display:inline-block;
*/
border:none;
background:lime;
padding:13px18px;
margin-top:20px;
/*outline-style:none;
!*去除点击时外部框线*!*/
/*-webkit-transition-duration:0.6s;
*/
transition-duration:0.6s;
/*设置按钮阴影*/
box-shadow:08px16px0rgba(0,255,0,0.2),06px20px0rgba(0,0,255,0.1);
}
/*悬停出现阴影按钮*/
.button8{
border:none;
background:dodgerblue;
padding:13px18px;
margin-top:20px;
transition-duration:0.6s;
}
.button8:hover{
box-shadow:012px16px0rgba(0,255,0,0.24),017px50px0rgba(0,0,255,0.19);
}
/*禁用按钮*/
.button9{
border:none;
background:green;
padding:13px18px;
margin-top:20px;
opacity:0.6;
/*设置按钮的透明度*/
cursor:not-allowed;
/*设置按钮为禁用状态*/
}
/*箭头标记按钮*/
.button10{
display:inline-block;
border:none;
background:red;
color:white;
padding:20px;
text-align:center;
border-radius:4px;
width:180px;
font-size:16px;
/*可以通过字体控制button大小*/
transition:all0.5s;
margin:5px;
cursor:pointer;
}
.button10span{
cursor:pointer;
display:inline-block;
position:relative;
transition:0.5s;
}
.button10span:after{
content:'»';
color:white;
position:absolute;
opacity:0;
/*先设置透明度为0，即不可见*/
right:-20px;
/*新增箭头出来的方向*/
transition:0.5s;
}
.button10:hoverspan{
padding-right:15px;
/*新增箭头与前面文字的距离*/
}
.button10:hoverspan:after{
opacity:1;
/*设置透明度为1，即可见状态*/
right:0;
}
/*点击出现波纹效果按钮*/
.button11{
position:relative;
/*必须添上这一句，否则波纹布满整个页面*/
background:dodgerblue;
border:none;
color:white;
width:180px;
font-size:16px;
/*可以通过字体控制button大小*/
padding:20px;
border-radius:12px;
transition-duration:0.4s;
overflow:hidden;
outline-style:none;
/*去除点击时外部框线*/
}
.button11:after{
content:"";
background:aquamarine;
opacity:0;
display:block;
position:absolute;
padding-top:300%;
padding-left:350%;
margin-left:-20px!important;
margin-top:-120%;
transition:all0.5s;
}
.button11:active:after{
padding:0;
margin:0;
opacity:1;
transition:0.1s;
}
/*点击出现按压效果*/
.button12{
outline-style:none;
/*去除点击时外部框线*/
padding:20px;
color:white;
background:yellow;
border:none;
border-radius:12px;
box-shadow:0px9px0pxrgba(144,144,144,1),0px9px25pxrgba(0,0,0,.7);
}
.button12:hover{
background:gold;
}
.button12:active{
background:gold;
box-shadow:05px#666;
transform:translateY(4px);
transition-duration:0s;
/*过渡效果持续时间*/
}
5div按钮
1默认按钮 2链接按钮 3按钮 6悬停变色按钮 7阴影按钮 8悬停出现阴影 9禁用按钮 10箭头标记按钮 11波纹click 12按压效果click
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何使用HTML5+css3制作出12种常用的按钮开关样式
本文地址： https://pptw.com/jishu/664597.html