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>

美化滾動條效果程式碼例項
2018-07-11
css3水滴效果程式碼例項
2018-06-04
CSSS3
CSS3 美化radio單選按鈕
2019-02-01
CSSS3
css3晃動效果程式碼例項
2018-07-09
CSSS3
CSS3心形效果程式碼例項
2018-07-09
CSSS3
CSS3旋轉效果程式碼例項
2018-05-21
CSSS3
CSS3滑過光束效果程式碼例項
2018-07-12
CSSS3
CSS3小黃人效果程式碼例項
2018-07-08
CSSS3
css3折角效果程式碼例項
2018-05-28
CSSS3
CSS3梯形效果程式碼例項
2018-05-28
CSSS3
CSS3背景漸變效果程式碼例項
2018-05-22
CSSS3
CSS3星系運動效果程式碼例項
2018-07-03
CSSS3
CSS3動畫按鈕效果
2018-07-04
CSSS3動畫
CSS3文字凹凸效果程式碼例項
2018-05-23
CSSS3
Flutter Button（按鈕）
2018-12-10
Flutter
table表格美化程式碼例項
2018-04-03
CSS3 checkbox開關按鈕效果
2018-08-11
CSSS3
CSS3文字陰影效果程式碼例項
2018-07-16
CSSS3
HTML input button 按鈕
2018-10-24
HTML
HTML input button按鈕
2018-10-24
HTML
html實現簡單ListViews效果的例項程式碼
2020-05-20
HTMLView
CSS3滑動開關按鈕效果
2018-06-02
CSSS3
CSS3滑鼠懸浮動畫按鈕效果
2018-07-12
CSSS3動畫
Tkinter (02) 按鈕部件 Button
2020-07-12
Element原始碼分析系列3-Button(按鈕)
2018-08-17
原始碼
CSS3 checkbox美化效果
2018-07-04
CSSS3
CSS3提交按鈕等待打點迴圈效果
2018-07-22
CSSS3
CSS3簡單圓角立體按鈕效果
2018-07-03
CSSS3
Qt實現一個支援QSS的Switch Button(開關按鈕)
2020-12-12
QT
CSS3卡通形象程式碼例項
2018-05-22
CSSS3
利用css變數實現按鈕懸浮效果
2018-10-25
CSS變數
CustomPainter——微信拍視訊按鈕效果實現
2020-04-21
AI
CSS3現菱形效果程式碼
2018-07-22
CSSS3
jQuery tab選項卡效果程式碼例項
2018-08-05
jQuery
canvas載入效果程式碼例項
2018-07-09
Canvas
CSS橢圓效果程式碼例項
2018-06-02
CSS
CSS3發光背景程式碼例項
2018-05-22
CSSS3
CSS3紙飛機程式碼例項
2018-06-02
CSSS3
WPF Button按鈕設定圓角
2024-04-02

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

相關文章