怎么使用HTML5+css3制作出12种的按钮开关样式

这篇文章主要介绍怎么使用HTML5+css3制作出12种的按钮开关样式，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

公司主营业务：网站设计、成都网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出千阳免费做网站回馈大家。

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

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

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

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

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

   cursor属性的用法如下表所示

   

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

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

    
    
    



    
5div按钮
    


    1默认按钮
    2链接按钮
    3按钮
    
    6悬停变色按钮
    7阴影按钮
    8悬停出现阴影
    9禁用按钮
    10箭头标记按钮
    11波纹click
    12按压效果click

按钮开关样式如图所示

以上是怎么使用HTML5+css3制作出12种的按钮开关样式的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！