六种好看的css按钮效果

演示

html代码

<div class="col">
        <div class="container-1">
          <div class="btn btn-one">
            <span>BUTTON ONE</span>
          </div>
        </div>
        <div class="container-2">
          <div class="btn btn-two">
            <span>IDLE</span>
          </div>
        </div>
        <div class="container-3">
          <div class="btn btn-three">
            <span>BUTTON THREE</span>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="container-4">
          <div class="btn btn-four">
            <span>BUTTON FOUR</span>
          </div>
        </div>
        <div class="container-5">
          <div class="btn btn-five">
            <span>BUTTON FIVE</span>
          </div>
        </div>
        <div class="container-6">
          <div class="btn btn-six">
            <span>BUTTON SIX</span>
          </div>
        </div>
      </div>

css代码

    <style>
        html, body {
          height: 100%;
          width: 100%;
          margin: 0;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          font-family: 'Open Sans Condensed', sans-serif;
        }
        
        .col {
          height: 100%;
        }
        
        div[class*=container] {
          text-align: center;
          width: 100%;
          height: 33%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .container-1 {
          background: #333;
        }
        
        .container-2 {
          background: #4E598C;
        }
        
        .container-3 {
          background: #8499B1;
        }
        
        .container-4 {
          background: #9888A5;
        }
        
        .container-5 {
          background: #7B6D8D;
        }
        
        .container-6 {
          background: #565554;
        }
        
        /*
         BUTTON STYLING
        */
        .btn {
          position: relative;
          color: white;
          width: 256px;
          height: 64px;
          line-height: 64px;
          transition: all 0.3s;
        }
        
        .btn span {
          transition: all 0.3s;
          tranform: scale(1, 1);
        }
        
        .btn::before, .btn::after {
          content: '';
          position: absolute;
          transition: all 0.3s;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
        }
        
        .btn-one::before {
          left: 4px;
          z-index: 1;
          opacity: 0;
          background: rgba(255, 255, 255, 0.1);
          transform: scale(0.1, 1);
        }
        
        .btn-one:hover::before {
          opacity: 1;
          transform: scale(1, 1);
        }
        
        .btn-one::after {
          transition: all 0.3s;
          border: 1px solid rgba(255, 255, 255, 0.5);
        }
        
        .btn-one:hover::after {
          transform: scale(1, 0.1);
          opacity: 0;
        }
        
        /* BTN TWO */
        .btn-two::before, .btn-two::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          bottom: 0;
          left: 0;
          z-index: 1;
          transition: all 0.3s;
          border: 1px solid rgba(255, 255, 255, 0.5);
        }
        
        .btn-two:hover::after {
          animation-name: rotatecw;
          animation-duration: 2s;
        }
        
        .btn-two:hover::before {
          animation-name: rotateccw;
          animation-duration: 3s;
        }
        
        .btn-two:hover::after, .btn-two:hover::before {
          left: 96px;
          width: 64px;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
        }
        
        @keyframes rotatecw {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        
        @keyframes rotateccw {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(-360deg);
          }
        }
        
        /* BTN THREE */
        .btn-three::before {
          opacity: 0;
          background: rgba(255, 255, 255, 0.1);
          transform: scale(1, 0.1);
        }
        
        .btn-three:hover::before {
          opacity: 1;
          transform: scale(1, 1);
        }
        
        .btn-three::after {
          transition: all 0.3s;
          border: 1px solid rgba(255, 255, 255, 0.5);
        }
        
        .btn-three:hover::after {
          transform: scale(1, 0.1);
          opacity: 0;
        }
        
        /* BTN FOUR */
        .btn-four:hover span {
          transform: scale(1.2, 1.2);
        }
        
        .btn-four::before {
          opacity: 0;
          background: rgba(255, 255, 255, 0.1);
          transform: scale(0.1, 0.1);
        }
        
        .btn-four:hover::before {
          opacity: 1;
          transform: scale(1, 1);
        }
        
        .btn-four::after {
          transition: all 0.3s;
          border: 1px solid rgba(255, 255, 255, 0.5);
        }
        
        .btn-four:hover::after {
          transform: scale(0, 0);
          opacity: 0;
        }
        
        /* BTN FIVE */
        .btn-five::before {
          transition: transform 0.15s, 0.15s border-radius 0.15s;
          opacity: 0;
          background: rgba(255, 255, 255, 0.1);
          transform: scale(0.1, 0.1);
          border-radius: 50%;
        }
        
        .btn-five:hover::before {
          opacity: 1;
          transform: scale(1, 1);
          border-radius: 0;
        }
        
        .btn-five::after {
          transition: all 0.3s;
          border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .btn-five:hover::after {
          opacity: 0;
        }
        
        /* BTN SIX */
        .btn-six::before {
          opacity: 0;
          background: rgba(255, 255, 255, 0.1);
          transform: scale(1.3, 1.3);
        }
        
        .btn-six:hover::before {
          opacity: 1;
          transform: scale(1, 1);
        }
        
        .btn-six::after {
          transition: all 0.3s;
          border: 1px solid rgba(255, 255, 255, 0.5);
        }
        
        .btn-six:hover::after {
          transform: scale(0, 0);
          opacity: 0;
        }
        
        </style>