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

按鈕開關樣式如圖所示

如何使用HTML5+css3製作出12種常用的按鈕開關樣式（附完整程式碼）