html5按钮样式具有子项目,如何使用HTML5+css3制作出12种常用的按钮开关样式(附完整代码)...
现如今前端网页的开发越来越注重设计感,这些设计感更体现在细节处,今天向大家具体介绍一下各式各样的开关按钮是如何使用HTML5+css3制作出来的,希望可以帮到大家。
使用HTML5+css3制作按钮开关的原理根据设计的要求填充各种颜色。
按钮开关的形状需要具体问题具体分析,如圆形按钮开关需要用到border-radius语句,方形可以直接使用div设置等。
鼠标悬停的时候光标样式的转换也是注重设计感的体现,这里我们着重介绍一下cursor的用法:
cursor 属性规定要显示的光标的类型,该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,根据W3C标准,现在市面上的几乎所有浏览器都兼容cursor属性,所以不要担心与浏览器的兼容问题。
cursor属性的用法如下表所示
本文所示12种按钮开关样式分别为:div按钮,默认按钮,链接按钮,圆角按钮,输入框按钮,悬停变色按钮,阴影按钮,悬停出现按钮,禁用按钮,箭头标记按钮,波纹按钮和按压效果按钮。
使用HTML5+css3制作按钮开关的代码
各式各样的按钮
*{
margin: 0;
padding: 0;
}
.wrap{
width: 600px;
height: 400px;
margin: 0 auto;
/*background: pink;*/
padding: 30px 50px;
}
/*div按钮*/
.button5{
width: 100px;
height: 30px;
float: left;
/*position: absolute;*/
text-align: center;
padding-top: 10px;
margin:0px 10px ;
background: greenyellow;
border: 1px solid plum;
cursor: pointer;
border-radius: 50%;
}
/*链接按钮*/
.button2{
background: gold;
border: 1px solid greenyellow;
text-decoration: none;
display: inline-block;
padding: 10px 22px;
border-radius: 20px;
/*cursor: pointer;靠近按钮的一只手*/
}
/*按钮*/
.button3{
background: pink;
border: 1px solid blueviolet;
padding: 10px 28px;
cursor: pointer;
color: yellow;
border-radius: 40%;
}
/*输入框按钮*/
.button4{
background: cornflowerblue;
border: 3px solid yellow;
padding: 10px 20px;
border-radius: 20%;
outline-style: none;/*去除点击时外部框线*/
}
/*悬停变色按钮*/
.button6{
background: plum;
color: greenyellow;
border: 1px solid dodgerblue;
transition-duration: 1s;/*过渡时间*/
border-radius: 12px;
padding: 13px 18px;
margin-top: 20px;
outline-style: none;/*去除点击时外部框线*/
}
.button6:hover{
background: yellow;
color: magenta;
transition-duration: 1s;
}
/*阴影按钮*/
.button7{
/*display: inline-block;*/
border: none;
background: lime;
padding: 13px 18px;
margin-top: 20px;
/*outline-style: none;!*去除点击时外部框线*!*/
/*-webkit-transition-duration: 0.6s;*/
transition-duration: 0.6s;
/*设置按钮阴影*/
box-shadow: 0 8px 16px 0 rgba(0,255,0,0.2),0 6px 20px 0 rgba(0,0,255,0.1);
}
/*悬停出现阴影按钮*/
.button8{
border: none;
background: dodgerblue;
padding: 13px 18px;
margin-top: 20px;
transition-duration: 0.6s;
}
.button8:hover{
box-shadow: 0 12px 16px 0 rgba(0,255,0,0.24),0 17px 50px 0 rgba(0,0,255,0.19);
}
/*禁用按钮*/
.button9{
border: none;
background: green;
padding: 13px 18px;
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: all 0.5s;
margin: 5px;
cursor: pointer;
}
.button10 span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button10 span:after{
content: '»';
color: white;
position: absolute;
opacity: 0;/*先设置透明度为0,即不可见*/
right:-20px;/*新增箭头出来的方向*/
transition: 0.5s;
}
.button10:hover span{
padding-right: 15px;/*新增箭头与前面文字的距离*/
}
.button10:hover span: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: all 0.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: 0px 9px 0px rgba(144,144,144,1),0px 9px 25px rgba(0,0,0,.7);
}
.button12:hover{
background: gold;
}
.button12:active{
background: gold;
box-shadow: 0 5px #666;
transform: translateY(4px);
transition-duration: 0s;/*过渡效果持续时间*/
}
1默认按钮
2链接按钮
3按钮
6悬停变色按钮
7阴影按钮
8悬停出现阴影
9禁用按钮
10箭头标记按钮
11波纹click
12按压效果click
按钮开关样式如图所示
html5按钮样式具有子项目,如何使用HTML5+css3制作出12种常用的按钮开关样式(附完整代码)...相关推荐
- 前端 开关按钮样式_如何使用HTML5+css3制作出12种常用的按钮开关样式(附完整代码)...
现如今前端网页的开发越来越注重设计感,这些设计感更体现在细节处,今天向大家具体介绍一下各式各样的开关按钮是如何使用HTML5+css3制作出来的,希望可以帮到大家. 使用HTML5+css3制作按钮开 ...
- 怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
- html怎么把字做成动画效果,如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码)...
摘要 腾兴网为您分享:如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码),学宝,小米社区,手机管家,神州专车等软件知识,以及小学英语点读机,便利宝,startos,工资宝,玩,大将军手 ...
- html5 css 3d动画效果代码,css3D+动画的例子(附完整代码)
本篇文章给大家带来的内容是关于css3D+动画的例子(附完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总 ...
- 单选按钮_PerlTk教程之按钮Button、复选按钮Checkbutton、单选按钮Radiobutton(附完整代码)...
<Perl-Tk教程之按钮Button.复选按钮Checkbutton.单选按钮Radiobutton>Perl-Tk中有三种不同形式的按钮组件可供选择,它们分别是按钮(Button), ...
- ae制h5文字动画_如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
- 图片跟随鼠标样式跟随效果(附完整代码及效果)
Demo效果如下: 完整代码如下: <!DOCTYPE html> <html lang="en"><head><meta charset ...
- html5闪光字效果,如何使用css3+html5来制作文字霓虹灯效果(付完整代码)
在科技日益发展的今天,人们对于审美越来越挑剔,这就要求我们对于前端开发的态度更加的严谨的同时,需要加入新鲜的元素,以达到吸引目光的目的.那么今天本文带大家了解一下如何使用css3+html5来制作文字 ...
- html5按钮自动特效,HTML5 svg和CSS3 22种炫酷鼠标点击按钮特效
这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮 ...
最新文章
- 洛阳中考实验计算机分数,2019洛阳中考总分是多少 录取分数线是多少
- workflow initialization - GSWFWC
- 石子合并问题--直线版(Hrbust-1818)
- MAC 下用GCC编译报错:“Undefined symbols for architecture x86_64: ”
- 正确的修改web项目的名字
- mysql update修改数据_MYsql如何用update语句修改数据,值得一看
- 3d激光雷达开发(ndt匹配)
- 关联分析(三)--GSP算法
- python-format函数
- PowerPivot 和 SQL Azure 快速入门
- 从大数据角度看你的信用借贷
- 论文润色软件Stylewriter,whitesmoke,1check使用亲测
- 推流至Wowza服务器要注意的问题
- JAVA数据库宾馆住宿系统_基于Java的酒店入住管理系统的设计与实现(含源文件).doc...
- 理解Aode Air,理解RIA开发
- 恢复训练记录20210809
- 诚诚富众资讯1.02亿人次补偿式出游
- 利用 nslookup 解析 DNS 记录
- MySQL的触发器原理应用,after和before的区别
- K型热电偶(k-type)温度与电压转换计算笔记
热门文章
- Maven的maven-clean-plugin插件详解
- HH SaaS电商系统的物流单设计
- freebsd nginx php mysql_FreeBSD 安装配置Nginx+PHP+APC+MySQL
- 数组做参数_C语言进阶之路:函数—数组参数!
- java内部格式_详解java内部类的访问格式和规则
- java map 如何根据key获得对象_ThreadLocal:Java中的影分身
- python主循环方法mainloop_python gobject.mainloop吞噬信号事件
- python3异步协程爬虫_Python实现基于协程的异步爬虫
- HDMI高清光端机产品特点及应用场合介绍
- 飞畅科技-工业以太网的应用现状及前景展望