如何使用HTML5+css3制作出12种常用的按钮开关样式(附完整代码)

使用HTML5+css3制作按钮开关的原理

根据设计的要求填充各种颜色。

按钮开关的形状需要具体问题具体分析,如圆形按钮开关需要用到border-radius语句,方形可以直接使用div设置等。

鼠标悬停的时候光标样式的转换也是注重设计感的体现,这里我们着重介绍一下cursor的用法:

cursor 属性规定要显示的光标的类型,该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,根据W3C标准,现在市面上的几乎所有浏览器都兼容cursor属性,所以不要担心与浏览器的兼容问题。

web前端全栈资料粉丝福利(面试题、视频、资料笔记、进阶路线)

cursor属性的用法如下表所示

本文所示12种按钮开关样式分别为:div按钮,默认按钮,链接按钮,圆角按钮,输入框按钮,悬停变色按钮,阴影按钮,悬停出现按钮,禁用按钮,箭头标记按钮,波纹按钮和按压效果按钮。

使用HTML5+css3制作按钮开关的代码

各式各样的按钮

5div按钮


2链接按钮

按钮开关样式如图所示

以上就是如何使用HTML5+css3制作出12种常用的按钮开关样式(附完整代码)的详细内容,更多请关注我!!!!

你可能感兴趣的:(如何使用HTML5+css3制作出12种常用的按钮开关样式(附完整代码))