<code id="ymosk"><acronym id="ymosk"></acronym></code>
  • <strong id="ymosk"><input id="ymosk"></input></strong>
    <nav id="ymosk"></nav>
    <source id="ymosk"><input id="ymosk"></input></source>
  • <object id="ymosk"></object>
    技術頻道導航
    HTML/CSS
    .NET技術
    IIS技術
    PHP技術
    Js/JQuery
    Photoshop
    Fireworks
    服務器技術
    操作系統
    網站運營

    贊助商

    分類目錄

    贊助商

    最新文章

    搜索

    漂亮的偽元素CSS按鈕5個實例代碼

    作者:admin    時間:2019-9-17 16:18:23    瀏覽:

    在本教程中,我將向大家介紹如何只使用一個錨標簽和一個強大的CSS,就能創建一個漂亮的按鈕。

    偽元素CSS按鈕

    偽元素CSS按鈕

    demo

    標記

    所有這些按鈕的結構只需要一個錨標簽就可以工作,因為我們將使用::before偽類創建其他元素。

    實例一

    偽元素CSS按鈕:實例一

    偽元素CSS按鈕:實例一

    我認為這是最簡單的一個,它有一個非常規則的css。

    CSS

    首先,我們將給出按鈕的一般樣式,包括其活動狀態。注意相對位置很重要,因為它將幫助我們稍后定位::before元素:

    .a_demo_one {
      background-color:#ba2323;
      padding:10px;
      position:relative;
      font-family: 'Open Sans', sans-serif;
      font-size:12px;
      text-decoration:none;
      color:#fff;
      border: solid 1px #831212;
      background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
      border-radius: 5px;
    }

    .a_demo_one:active {
      padding-bottom:9px;
      padding-left:10px;
      padding-right:10px;
      padding-top:11px;
      top:1px;
      background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);
    }

    然后,我們使用::before偽元素創建灰色容器。使用絕對定位來定位我們的元素:

    .a_demo_one::before {
      background-color:#ccd0d5;
      content:"";
      display:block;
      position:absolute;
      width:100%;
      height:100%;
      padding:8px;
      left:-8px;
      top:-8px;
      z-index:-1;
      border-radius: 5px;
      box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
    }

    execcodegetcode

    實例二

    偽元素CSS按鈕:實例二

    偽元素CSS按鈕:實例二

    這一個有點復雜,因為是三維的外觀。此按鈕不在其“容器”中,但當您單擊它時,它將向下移動:

    .a_demo_two {
      background-color:#6fba26;
      padding:10px;
      position:relative;
      font-family: 'Open Sans', sans-serif;
      font-size:12px;
      text-decoration:none;
      color:#fff;
      background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
      box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
      border-radius: 5px;
    }

    .a_demo_two:active {
      top:7px;
      background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
      box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
      color: #156785;
      text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
      background: rgb(44,160,202);
    }

    這里有一個棘手的部分:

    由于偽元素的位置取決于其父元素,因此一旦父元素向下移動幾個像素,就必須向上移動相同數量的像素。

    .a_demo_two::before {
      background-color:#072239;
      content:"";
      display:block;
      position:absolute;
      width:100%;
      height:100%;
      padding-left:2px;
      padding-right:2px;
      padding-bottom:4px;
      left:-2px;
      top:5px;
      z-index:-1;
      border-radius: 6px;
      box-shadow: 0px 1px 0px #fff;
    }

    .a_demo_two:active::before {
      top:-2px;
    }

    execcodegetcode

    實例三

    偽元素CSS按鈕:實例三

    偽元素CSS按鈕:實例三

    這是一個分割的按鈕,一旦你點擊它,它就凹進去。

    CSS

    在這里,您會注意到一個右邊距,這是為了補償偽元素的寬度。

    .a_demo_three {
      background-color:#3bb3e0;
      font-family: 'Open Sans', sans-serif;
      font-size:12px;
      text-decoration:none;
      color:#fff;
      position:relative;
      padding:10px 20px;
      border-left:solid 1px #2ab7ec;
      margin-left:35px;
      background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    }

    .a_demo_three:active {
      top:3px;
      background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
      box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    }

    偽元素CSS這樣寫:

    .a_demo_three::before {
      content:"·";
      width:35px;
      max-height:29px;
      height:100%;
      position:absolute;
      display:block;
      padding-top:8px;
      top:0px;
      left:-36px;
      font-size:16px;
      font-weight:bold;
      color:#8fd1ea;
      text-shadow:1px 1px 0px #07526e;
      border-right:solid 1px #07526e;
      background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
    }

    .a_demo_three:active::before {
      top:-3px;
      box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
    }

    execcodegetcode

    實例四

    偽元素CSS按鈕:實例四

    偽元素CSS按鈕:實例四

    這次,我們將使用偽元素作為指針,使用一個圖像作為背景。

    CSS

    .a_demo_four {
      background-color:#4b3f39;
      font-family: 'Open Sans', sans-serif;
      font-size:12px;
      text-decoration:none;
      color:#fff;
      position:relative;
      padding:10px 20px;
      padding-right:50px;
      background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
      border-radius: 5px;
      box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
    }

    .a_demo_four:active {
      top:3px;
      background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
      box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
    }

    .a_demo_four::before {
      background-color:#322620;
      background-image:url(../images/right_arrow.png); /* 圖像背景 */
      background-repeat:no-repeat;
      background-position:center center;
      content:"";
      width:20px;
      height:20px;
      position:absolute;
      right:15px;
      top:50%;
      margin-top:-9px;
      border-radius: 50%;
      box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
    }

    .a_demo_four:active::before {
      top:50%;
      margin-top:-12px;
      box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
    }

    execcodegetcode

    實例五

    偽元素CSS按鈕:實例五

    偽元素CSS按鈕:實例五

    這個例子有點俗氣,但是你可以用很多有用的方式來使用它。

    CSS

    .a_demo_five {
      background-color:#9827d3;
      width:150px;
      display:inline-block;
      font-family: 'Open Sans', sans-serif;
      font-size:12px;
      text-decoration:none;
      color:#fff;
      position:relative;
      margin-top:40px;
      padding-bottom:10px;
      padding-top:10px;
      background-image: linear-gradient(bottom, rgb(168,48,232) 100%, rgb(141,32,196) 0%);
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
      box-shadow: inset 0px 1px 0px #ca73f8, 0px 5px 0px 0px #6a1099, 0px 10px 5px #999;
    }

    .a_demo_five:active {
      top:3px;
      background-image: linear-gradient(bottom, rgb(168,48,232) 0%, rgb(141,32,196) 100%);
      box-shadow: inset 0px 4px 1px #7215a3, 0px 2px 0px 0px #6a1099, 0px 5px 3px #999;
    }

    .a_demo_five::before {
      background-color:#fff;
      background-image:url(../images/heart.gif);
      background-repeat:no-repeat;
      background-position:center center;
      border-left:solid 1px #CCC;
      border-top:solid 1px #CCC;
      border-right:solid 1px #CCC;
      content:"";
      width:148px;
      height:40px;
      position:absolute;
      top:-30px;
      left:0px;
      margin-top:-11px;
      z-index:-1;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }

    .a_demo_five:active::before {
      top: -33px;
      box-shadow: 0px 3px 0px #ccc;
    }

    execcodegetcode

    最后

    感謝您閱讀本教程,我希望您覺得它有用。

    標簽: css  css3  button  按鈕  偽元素  
    • IT熱文
    • 站長推薦
    微拍福利