html5 按钮css样式修改,如何使用HTML5+css3制作出12种常用的按钮开关样式

使用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