如何使用HTML5+css3制作出12种常用的按钮开关样式（附完整代码）-css教程-PHP中文网

首页

web前端

css教程

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

坏嘻嘻

Sep 28, 2018 am 10:07 AM

css3 按钮

现如今前端网页的开发越来越注重设计感，这些设计感更体现在细节处，今天向大家具体介绍一下各式各样的开关按钮是如何使用HTML5+css3制作出来的，希望可以帮到大家。

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

根据设计的要求填充各种颜色。
按钮开关的形状需要具体问题具体分析，如圆形按钮开关需要用到border-radius语句，方形可以直接使用div设置等。
鼠标悬停的时候光标样式的转换也是注重设计感的体现，这里我们着重介绍一下cursor的用法：

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>各式各样的按钮</title>
    <style type="text/css">
        *{
            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: &#39;»&#39;;
            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;/*过渡效果持续时间*/
        }
    </style>
</head>
<body>
<div>
    <div>5div按钮</div>
    <p style="clear: both"><br></p>
    <button>1默认按钮</button>
    <a href="#">2链接按钮</a>
    <button>3按钮</button>
    <input type="button" value="4输入框按钮">
    <button>6悬停变色按钮</button>
    <button>7阴影按钮</button>
    <button>8悬停出现阴影</button>
    <button>9禁用按钮</button>
    <button style="vertical-align: middle"><span>10箭头标记按钮</span></button>
    <button>11波纹click</button>
    <button>12按压效果click</button>
</div>
</body>
</html>

登录后复制

按钮开关样式如图所示

微信截图_20180928095638.png

以上是如何使用HTML5+css3制作出12种常用的按钮开关样式（附完整代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7519

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何修复 Microsoft Teams 白屏 Apr 17, 2023 pm 05:07 PM

重新启动Microsoft团队如果您在启动Teams后出现空白屏幕，则一个很好的起点是重新启动应用程序本身。要关闭并重新启动MicrosoftTeams，请执行以下操作：右键单击任务栏通知区域中的Teams图标，然后从菜单中单击退出。从“开始”菜单或桌面快捷方式重新启动MicrosoftTeams并查看它是否有效。从任务管理器关闭MicrosoftTeams如果Teams进程的基本重新启动不起作用，请进入任务管理器并结束任务。要从任务管理器关闭Teams，请执行以下操作

什么是 Windows 安全按钮？所有你必须知道的 Apr 13, 2023 pm 10:22 PM

Windows 安全按钮是什么？顾名思义，Windows 安全按钮是一项安全功能，可让您安全地访问登录菜单并使用密码登录您的设备。在这种情况下，智能手机绝对领先。但是 Windows 便携式设备（例如平板电脑）已经开始添加一个 Windows 安全按钮，它不仅仅是一种将不需要的用户拒之门外的方式。它还提供额外的登录菜单选项。尽管如果您试图在台式 PC 或笔记本电脑上找到 Windows 安全按钮，您可能会感到失望。这是为什么？平板电脑与个人电脑Windows 安全按钮是一个物理按钮，存在于平板

在 Windows 中禁用传递优化服务的 5 种方法 May 17, 2023 am 09:31 AM

许多原因可能使你想要禁用传递优化服务在你的Windows电脑上。但是，我们的读者抱怨不知道要遵循的正确步骤。本指南将通过几个步骤讨论禁用传递优化服务的方法。要了解有关服务的更多信息，您可能需要查看我们的如何打开services.msc指南以获取更多信息。传递优化服务有什么作用？传递优化服务是具有云托管解决方案的HTTP下载程序。它允许Windows设备从备用来源下载Windows更新、升级、应用程序和其他大型包文件。此外，它还通过允许部署中的多个设备下载这些包来帮助减少带宽消耗。此外，Windo

如何重启、强制重启和关闭 iPad Mini 6 Apr 29, 2023 pm 12:19 PM

如何强制重启iPadMini6强制重启iPadMini6是通过一系列按钮按下来完成的，它的工作原理如下：按下并释放音量调高按下并释放降低音量按住电源/锁定按钮，直到您在屏幕上看到Apple标志，表明iPadMini已强制重启仅此而已，您已经强制重启了iPadMini6！强制重启通常用于故障排除原因，例如iPadMini被冻结、应用程序被冻结或发生其他一些一般性不当行为。关于强制重启第6代iPadMini的程序需要注意的一点是，对于所有其他具有超薄边框并使用

重写后：如何解决 PS5 控制器在 Windows 11 上未被识别的问题 May 09, 2023 pm 10:16 PM

关于连接我的PS5控制器，我应该知道什么？与DualSense控制器一样好，有报告称控制器未连接或未被检测到。解决此问题的最简单方法是使用适当的USB电缆将控制器连接到您的PC。有些游戏本身就支持DualSense。在这些情况下，您只需插入控制器即可。但这引发了其他问题，例如如果您没有USB电缆或不想使用USB电缆怎么办

如何清空 Microsoft Edge 浏览器的下载记录？ Apr 21, 2023 am 09:34 AM

点击进入：ChatGPT工具插件导航大全在Edge中查找和删除下载历史记录与其他浏览器一样，Edge有一个下载

如何使用Vue实现按钮倒计时特效 Sep 21, 2023 pm 02:03 PM

如何使用Vue实现按钮倒计时特效随着Web应用程序的日益普及，我们经常需要在用户与页面进行交互时使用一些动态效果来提升用户体验。其中，按钮的倒计时特效是非常常见且实用的一种效果。本文将介绍如何使用Vue框架来实现按钮倒计时特效，并给出具体的代码示例。首先，我们需要创建一个Vue组件，包含一个按钮和倒计时的功能。在Vue中，组件是一种可复用的Vue实例，视图会

更改 Windows 11 上的电源按钮操作 [5 提示] Sep 29, 2023 pm 11:29 PM

电源按钮可以做的不仅仅是关闭PC，尽管这是桌面用户的默认操作。如果您想更改Windows11中的电源按钮操作，它比您想象的要容易！请记住，物理电源按钮与“开始”菜单中的按钮不同，下面的更改不会影响后者的操作。此外，您会发现电源选项略有不同，具体取决于它是台式机还是笔记本电脑。为什么要在Windows11中更改电源按钮操作？如果您让计算机进入睡眠状态的频率高于关闭计算机，则更改硬件电源按钮（即PC上的物理电源按钮）的行为方式即可。同样的想法也适用于休眠模式或简单地关闭显示器。更改Windows11

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题