css3實現button按鈕美化效果程式碼例項

antzone發表於2017-04-02

分享一段程式碼例項，它實現了button按鈕美化效果。

提供了多款美化功能，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  margin: 0px;
  padding: 0px;
  background-color: #FFFFFF;
}
/*按鈕公共樣式*/
.sim-button {
  /*border:1px solid red;*/
  line-height: 50px;
  height: 50px;
  text-align: center;
  margin-right: auto;
  margin-left: 55px;
  margin-top: 125px;
  width: 200px;
  cursor: pointer;
  font-size: 16px;
  outline: none;
}
/*按鈕1*/
.button1 {
  border-radius: 5px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.button1:hover {
  background-color: rgba(155,255,255,0.2);
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
}
/*按鈕2*/
.button2 {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  position: relative;
}
.button2 span {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.button2:hover {
  background-color: rgba(155,255,255,0.2);
}
.button2:hover > span {
  opacity: 0;
  -webkit-transform: translate(0px,-80px);
  transform: translate(0px,-80px);
}
.button2::after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transform: translate(0, 30%);
  transform: translate(0, 30%);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.button2:hover::after {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
/*按鈕3*/
.button3 {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  position: relative;
  overflow: hidden;
}
.button3 span {
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
      }
 
      .button3:hover {
        background-color: rgba(155,255,255,0.2);
      }
 
        .button3:hover > span {
          opacity: 0;
          -webkit-transform: translate(0px,40px);
          transform: translate(0px,40px);
        }
 
      .button3::after {
        content: attr(data-text);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        -webkit-transform: translate(-30%, 0);
        transform: translate(-30%, 0);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
      }
 
      .button3:hover::after {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
    /*按鈕4*/
    .button4 {
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      position: relative;
    }
 
      .button4 > span {
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
      }
 
      .button4:hover {
        background-color: rgba(155,255,255,0.2);
      }
 
        .button4:hover > span {
          opacity: 0;
          -webkit-transform: translate(0px,40px);
          transform: translate(0px,40px);
        }
 
      .button4::after {
        content: attr(data-text);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        -webkit-transform: translate(-30%, -50%) rotate(-30deg);
        transform: translate(-30%, -50%) rotate(-30deg);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
      }
 
      .button4:hover::after {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
    /*按鈕5*/
    @-webkit-keyframes jello {
      from, 11.1%, to {
        -webkit-transform: none;
        transform: none;
      }
 
      22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
      }
 
      33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
      }
 
      44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
      }
 
      55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
      }
 
      66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
      }
 
      77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg);
      }
 
      88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
      }
    }
 
    @keyframes jello {
      from, 11.1%, to {
        -webkit-transform: none;
        transform: none;
      }
 
      22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
      }
 
      33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
      }
 
      44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
      }
 
      55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
      }
 
      66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
      }
 
      77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg);
      }
 
      88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
      }
    }
 
    .button5 {
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      position: relative;
    }
 
      .button5:hover {
        -webkit-animation-name: jello;
        animation-name: jello;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        background-color: rgba(255,255,255,0.2);
      }
    /*按鈕6*/
    .button6 {
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      position: relative;
    }
 
      .button6 span {
        z-index: 2;
        display: block;
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
      }
 
      .button6::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        background-color: rgba(155,155,255,0.5);
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transform: scale(0.5, 1);
        transform: scale(0.5, 1);
      }
 
      .button6:hover::before {
        opacity: 1;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
      }
    /*按鈕7*/
    .button7 {
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      position: relative;
    }
 
      .button7 span {
        z-index: 2;
        display: block;
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
      }
 
      .button7::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        background-color: rgba(155,155,255,0.5);
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transform: scale(1, 0.5);
        transform: scale(1, 0.5);
      }
 
      .button7:hover::before {
        opacity: 1;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
      }
    /*按鈕8*/
    .button8 {
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      position: relative;
    }
 
      .button8 span {
        z-index: 2;
        display: block;
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
      }
 
      .button8::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        background-color: rgba(155,155,255,0.5);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
      }
 
      .button8:hover::before {
        opacity: 1;
        width: 100%;
      }
 
    .button9 {
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      position: relative;
      overflow: hidden;
    }
 
      .button9 span {
        z-index: 2;
        display: block;
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
      }
 
      .button9::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        background-color: rgba(155,155,255,0.5);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
      }
 
      .button9:hover::before {
        opacity: 1;
        -webkit-transform: skewX(-180deg) scale(0.5,1);
        transform: skewX(-180deg) scale(0.5,1);
      }
 
    .button10 {
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      position: relative;
      perspective: 2000px;
    }
 
      .button10 span {
        z-index: 2;
        display: block;
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
      }
 
      .button10::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        border: 1px solid rgba(155,155,255,0.5);
        background-color: rgba(155,155,255,0.25);
      }
 
      .button10::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        border: 1px solid rgba(155,155,255,0.5);
        background-color: rgba(155,155,255,0.25);
      }
 
      .button10:hover::before {
        -webkit-transform: rotateX(60deg) translate(0px,40px);
        transform: rotateX(60deg) translate(0px,40px);
      }
 
      .button10:hover::after {
        -webkit-transform: rotateX(-60deg) translate(0px,-40px);
        transform: rotateX(-60deg) translate(0px,-40px);
      }
 
    .button11 {
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      position: relative;
      overflow: hidden;
    }
 
      .button11 span {
        z-index: 2;
        display: block;
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
      }
 
      .button11::before {
        content: '';
        position: absolute;
        top: 50px;
        left: -5px;
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 190px solid rgba(155,155,255,0.25);
        z-index: 1;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
      }
 
      .button11::after {
        content: '';
        position: absolute;
        top: 50px;
        left: -5px;
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 190px solid rgba(155,155,255,0.25);
        z-index: 1;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
      }
 
      .button11::after {
        -webkit-transition-delay: 0.2s; /* Safari */
        transition-delay: 0.2s;
      }
 
      .button11:hover::before {
        opacity: 1;
        -webkit-transform: translate(0px,-190px);
        transform: translate(0px,-190px);
      }
 
      .button11:hover::after {
        opacity: 1;
        -webkit-transform: translate(0px,-150px);
        transform: translate(0px,-150px);
      }
 
    .button12 {
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      position: relative;
    }
 
      .button12::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        border: 1px solid rgba(155,155,255,0.5);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
      }
 
      .button12:hover::before {
        opacity: 0;
        -webkit-transform: scale(1.2,1.2);
        transform: scale(1.2,1.2);
      }
 
      .button12::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        background-color: rgba(155,155,255,0.25);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        -webkit-transform: scale(0.5,0.5);
        transform: scale(0.5,0.5);
      }
 
      .button12:hover::after {
        opacity: 1;
        -webkit-transform: scale(1,1);
        transform: scale(1,1);
      }
 
    .button13 {
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      position: relative;
    }
 
      .button13::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(155,155,155,0.25);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
      }
 
      .button13:hover::before {
        opacity: 0;
        -webkit-transform: scale(0.5,0.5);
        transform: scale(0.5,0.5);
      }
 
      .button13::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        border: 1px solid rgba(255,255,255,0.5);
        -webkit-transform: scale(1.2,1.2);
        transform: scale(1.2,1.2);
      }
 
      .button13:hover::after {
        opacity: 1;
        -webkit-transform: scale(1,1);
        transform: scale(1,1);
      }
 
    .button14 {
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      position: relative;
      overflow: hidden;
    }
 
      .button14::before, .button15::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(155,155,155,0.5);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        -webkit-transform: translate(0,-100%);
        transform: translate(0,-100%);
        -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
      }
 
      .button14::after {
        -webkit-transition-delay: 0.2s; /* Safari */
        transition-delay: 0.2s;
      }
 
      .button14:hover::before, .button15:hover::after {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
      }
 
    .button15 {
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
    }
 
      .button15::before, .button16::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(155,125,135,0.25);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        -webkit-transform: translate(-100%,0);
        transform: translate(-100%,0);
        -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
      }
 
      .button15::after {
        -webkit-transition-delay: 0.2s; /* Safari */
        transition-delay: 0.2s;
      }
 
      .button15:hover::before, .button16:hover::after {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
      }
</style>
</head>
<body>
  <button class="sim-button button1">按鈕1</button>
  <button class="sim-button button2" data-text="按鈕2">
    <span>按鈕2</span>
  </button>
  <button class="sim-button button3" data-text="按鈕3">
    <span>按鈕3</span>
  </button>
  <button class="sim-button button4" data-text="按鈕4">
    <span>按鈕4</span>
  </button>
  <button class="sim-button button5" data-text="按鈕5">
    <span>按鈕5</span>
  </button>
  <button class="sim-button button6" data-text="按鈕6">
    <span>按鈕6</span>
  </button>
  <button class="sim-button button7" data-text="按鈕7">
    <span>按鈕7</span>
  </button>
  <button class="sim-button button8" data-text="按鈕8">
    <span>按鈕8</span>
  </button>
  <button class="sim-button button9" data-text="按鈕9">
    <span>按鈕9</span>
  </button>
 
  <button class="sim-button button10" data-text="按鈕8">
    <span>按鈕10</span>
  </button>
  <button class="sim-button button11" data-text="按鈕8">
    <span>按鈕11</span>
  </button>
  <button class="sim-button button12" data-text="按鈕8">
    <span>按鈕12</span>
  </button>
  <button class="sim-button button13" data-text="按鈕8">
    <span>按鈕13</span>
  </button>
  <button class="sim-button button14" data-text="按鈕8">
    <span>按鈕14</span>
  </button>
  <button class="sim-button button15" data-text="按鈕8">
    <span>按鈕15</span>
  </button>
</body>
</html>

css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項
2017-02-17
CSSS3
css3實現的開關按鈕程式碼例項
2017-03-03
CSSS3
css3單選框、核取方塊和開關按鈕美化效果程式碼例項
2017-02-25
CSSS3
單選按鈕美化效果程式碼
2017-04-11
按鈕倒數計時可用效果例項程式碼
2017-03-02
css3實現的折角效果程式碼例項
2017-03-03
CSSS3
CSS3 radio單選按鈕美化效果
2018-02-13
CSSS3
滑鼠懸浮按鈕背景變色效果程式碼例項
2017-03-16
css3實現的打折卡效果程式碼例項
2017-03-06
CSSS3
CSS3 實現的鐘表效果程式碼例項
2017-05-08
CSSS3
css3實現的毛玻璃效果程式碼例項
2017-02-28
CSSS3
css3實現的打字機效果程式碼例項
2017-02-21
CSSS3
css3實現的圓角效果程式碼例項
2017-02-19
CSSS3
css3實現的氣泡效果程式碼例項
2017-02-19
CSSS3
美化滾動條效果程式碼例項
2018-07-11
<input type="file">美化效果程式碼例項
2017-04-04
表單提示美化效果程式碼例項
2017-04-19
Qt實現畫板部件並和自定義button按鈕結合例項
2015-11-30
QT
css3實現的文字下滑出現效果程式碼例項
2017-03-13
CSSS3
js點選按鈕數字加1效果程式碼例項
2017-12-04
JS
css3實現的斑馬紋效果程式碼例項
2017-03-24
CSSS3
CSS3實現的div圓角效果程式碼例項
2017-02-17
CSSS3
CSS3實現的div陰影效果程式碼例項
2017-02-17
CSSS3
css3實現的旋轉魔方效果程式碼例項
2017-02-26
CSSS3
css3實現的動態大白效果程式碼例項
2017-02-20
CSSS3
css3實現的文字陰影效果程式碼例項
2017-02-20
CSSS3
css3實現網狀球體效果程式碼例項
2017-02-20
CSSS3
css3實現的多啦a夢效果程式碼例項
2017-02-22
CSSS3
css3實現的checkbox核取方塊美化程式碼例項
2017-02-20
CSSS3
javascript開關按鈕程式碼例項
2017-04-05
JavaScript
CSS3模擬實現iphone返回按鈕效果
2017-02-17
CSSS3iPhone
點選按鈕實現隱藏一個元素程式碼例項
2017-04-03
css3實現div邊框陰影效果程式碼例項
2017-03-06
CSSS3
jQuery和css3實現的開關效果程式碼例項
2017-04-18
jQueryCSSS3
css3實現的邊框陰影效果程式碼例項
2017-02-26
CSSS3
css3實現的動物頭像效果程式碼例項
2017-02-22
CSSS3
css3實現的皮球上下彈動效果程式碼例項
2017-02-23
CSSS3
css3星空效果程式碼例項
2017-04-14
CSSS3

css3實現button按鈕美化效果程式碼例項

相關文章