欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么使用HTML5+css3制作出12種的按鈕開關(guān)樣式

這篇文章主要介紹怎么使用HTML5+css3制作出12種的按鈕開關(guān)樣式，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出千陽免費(fèi)做網(wǎng)站回饋大家。

使用HTML5+css3制作按鈕開關(guān)的原理

  1. 根據(jù)設(shè)計(jì)的要求填充各種顏色。

  2. 按鈕開關(guān)的形狀需要具體問題具體分析，如圓形按鈕開關(guān)需要用到border-radius語句，方形可以直接使用div設(shè)置等。

  3. 鼠標(biāo)懸停的時(shí)候光標(biāo)樣式的轉(zhuǎn)換也是注重設(shè)計(jì)感的體現(xiàn)，這里我們著重介紹一下cursor的用法：

    cursor 屬性規(guī)定要顯示的光標(biāo)的類型，該屬性定義了鼠標(biāo)指針放在一個(gè)元素邊界范圍內(nèi)時(shí)所用的光標(biāo)形狀，根據(jù)W3C標(biāo)準(zhǔn)，現(xiàn)在市面上的幾乎所有瀏覽器都兼容cursor屬性，所以不要擔(dān)心與瀏覽器的兼容問題。

    cursor屬性的用法如下表所示

    怎么使用HTML5+css3制作出12種的按鈕開關(guān)樣式

  4. 本文所示12種按鈕開關(guān)樣式分別為：div按鈕，默認(rèn)按鈕，鏈接按鈕，圓角按鈕，輸入框按鈕，懸停變色按鈕，陰影按鈕，懸停出現(xiàn)按鈕，禁用按鈕，箭頭標(biāo)記按鈕，波紋按鈕和按壓效果按鈕。

使用HTML5+css3制作按鈕開關(guān)的代碼

<!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;/*去除點(diǎn)擊時(shí)外部框線*/
        }
        /*懸停變色按鈕*/
        .button6{
            background: plum;
            color: greenyellow;
            border: 1px solid dodgerblue;
            transition-duration: 1s;/*過渡時(shí)間*/
            border-radius: 12px;
            padding: 13px 18px;
            margin-top: 20px;
            outline-style: none;/*去除點(diǎn)擊時(shí)外部框線*/
        }
        .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;!*去除點(diǎn)擊時(shí)外部框線*!*/
            /*-webkit-transition-duration: 0.6s;*/
            transition-duration: 0.6s;
            /*設(shè)置按鈕陰影*/
            box-shadow: 0 8px 16px 0 rgba(0,255,0,0.2),0 6px 20px 0 rgba(0,0,255,0.1);
        }
        /*懸停出現(xiàn)陰影按鈕*/
        .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;/*設(shè)置按鈕的透明度*/
            cursor: not-allowed;/*設(shè)置按鈕為禁用狀態(tài)*/
        }
        /*箭頭標(biāo)記按鈕*/
        .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;/*先設(shè)置透明度為0，即不可見*/
            right:-20px;/*新增箭頭出來的方向*/
            transition: 0.5s;
        }
        .button10:hover span{
            padding-right: 15px;/*新增箭頭與前面文字的距離*/
        }
        .button10:hover span:after{
            opacity: 1;/*設(shè)置透明度為1，即可見狀態(tài)*/
            right: 0;
        }
        /*點(diǎn)擊出現(xiàn)波紋效果按鈕*/
        .button11{
            position: relative;/*必須添上這一句，否則波紋布滿整個(gè)頁面*/
            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;/*去除點(diǎn)擊時(shí)外部框線*/
        }
        .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;
        }
        /*點(diǎn)擊出現(xiàn)按壓效果*/
        .button12{
            outline-style: none;/*去除點(diǎn)擊時(shí)外部框線*/
            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;/*過渡效果持續(xù)時(shí)間*/
        }
    </style>
</head>
<body>
<div>
    <div>5div按鈕</div>
    <p style="clear: both"><br></p>
    <button>1默認(rèn)按鈕</button>
    <a href="#">2鏈接按鈕</a>
    <button>3按鈕</button>
    <input type="button" value="4輸入框按鈕">
    <button>6懸停變色按鈕</button>
    <button>7陰影按鈕</button>
    <button>8懸停出現(xiàn)陰影</button>
    <button>9禁用按鈕</button>
    <button style="vertical-align: middle"><span>10箭頭標(biāo)記按鈕</span></button>
    <button>11波紋click</button>
    <button>12按壓效果click</button>
</div>
</body>
</html>

按鈕開關(guān)樣式如圖所示

怎么使用HTML5+css3制作出12種的按鈕開關(guān)樣式

以上是怎么使用HTML5+css3制作出12種的按鈕開關(guān)樣式的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：怎么使用HTML5+css3制作出12種的按鈕開關(guān)樣式
瀏覽路徑：http://www.chinadenli.net/article44/piidhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、建站公司、網(wǎng)站制作、、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營