CSS按钮的八种HOVER效果

一.发送效果

HTML

<div class="send-btn" >
    <i></i>
    Send
</div>

CSS

  .send-btn {
      display: inline-block;
      background: #5f55af;
      border: 0;
      border-radius: 5px;
      padding: 10px 30px 10px 20px;
      color: white;
      text-transform: uppercase;
      font-weight: bold;
    }

    .send-btn i {
      display: inline-block;
      vertical-align: middle;
      padding-right: 5px;
      width: 0;
      height: 0;
      border-top: 12px solid transparent;
      border-left: 20px solid #1AC471;
      border-bottom: 12px solid transparent;
    }

    .send-btn:hover i {
      animation: fly 2s ease 1;
    }

    @keyframes fly {
      0% {
        transform: translateX(0%);
      }

      50% {
        transform: translateX(300%);
      }

      100% {
        transform: translateX(0);
      }
    }

发送效果.gif

二.霓虹效果

HTML

  <div id="neon-btn">
    <button class="btn one">Hover me</button>
    <button  class="btn two">Hover me</button>
    <button  class="btn three">Hover me</button>
  </div>

CSS

    #neon-btn {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 150px;
      background: #031628;
    }

    .btn {
      border: 1px solid;
      background-color: transparent;
      text-transform: uppercase;
      font-size: 14px;
      padding: 10px 20px;
      font-weight: 300;
    }

    .one {
      color: #4cc9f0;
    }

    .two {
      color: #f038ff;
    }

    .three {
      color: #b9e769;
    }

    .btn:hover {
      color: white;
    }

    .one:hover {
      border-color: #4cc9f0;
      background-color: #4cc9f0;
      -webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
      -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
      box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
    }

    .two:hover {
      border-color: #f038ff;
      background-color: #f038ff;
      -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
      -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
      box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
    }

    .three:hover {
      border-color: #b9e769;
      background-color: #b9e769;
      -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
      -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
      box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
    }

霓虹效果.gif

三.边框效果

HTML

 <button class="draw-border">Hover me</button>

CSS

 .draw-border {
      border: 0;
      background: none;
      text-transform: uppercase;
      color: #4361ee;
      font-weight: bold;
      position: relative;
      outline: none;
      padding: 10px 20px;
      box-sizing: border-box;
    }

    .draw-border::before, .draw-border::after {
      box-sizing: inherit;
      position: absolute;
      content: '';
      border: 2px solid transparent;
      width: 0;
      height: 0;
    }

    .draw-border::after {
      bottom: 0;
      right: 0;
    }

    .draw-border::before {
      top: 0;
      left: 0;
    }

    .draw-border:hover::before, .draw-border:hover::after {
      width: 100%;
      height: 100%;
    }

    .draw-border:hover::before {
      border-top-color: #4361ee;
      border-right-color: #4361ee;
      transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
    }

    .draw-border:hover::after {
      border-bottom-color: #4361ee;
      border-left-color: #4361ee;
      transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
    }

边框效果.gif

四.圆形效果

HTML

  <div class="btn-container">
    <i>→</i>
    Hover me
  </div>

CSS

    .btn-container {
      width: 160px;
      display: flex;
      align-items: center;
      border: 0;
      border-radius: 50px;
      color: white;
      background: #5f55af;
      text-transform: uppercase;
      background: linear-gradient(to right, #f72585 50%, #5f55af 50%);
      background-size: 200% 100%;
      background-position: right bottom;
      transition:all 2s ease;
    }


    .btn-container i {
      background: #f72585;
      padding: 8px;
      border-radius: 50%;
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 20px;
      margin-right: 10px;
    }

    .btn-container:hover {
      background-position: left bottom;
    }

圆形效果.gif

五.圆角效果

HTML

 <button class="border-btn">Hover me</button>

CSS

    .border-btn {
      border: 0;
      border-radius: 10px;
      background: #2ec4b6;
      text-transform: uppercase;
      color: white;
      font-size: 16px;
      font-weight: bold;
      padding: 15px 30px;
      outline: none;
      position: relative;
      transition: border-radius 2s;
      -webkit-transition: border-radius 2s;
    }

    .border-btn:hover {
      border-radius: 50px 10px 50px 10px;
    }

圆角效果.gif

六.冰冻效果

HTML

  <div id="frozen-btn">
    <button class="frozen green">Hover me</button>
    <button class="frozen purple">Hover me</button>
  </div>

CSS


    #frozen-btn {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .frozen {
      border: 0;
      margin: 20px;
      text-transform: uppercase;
      font-size: 20px;
      font-weight: bold;
      padding: 15px 50px;
      border-radius: 50px;
      color: white;
      outline: none;
      position: relative;
    }

    .frozen:before{
      content: '';
      display: block;
      background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
      background-size: 210% 100%;
      background-position: right bottom;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      bottom:0;
      right:0;
      left: 0;
      border-radius: 50px;
      transition: all 1s;
      -webkit-transition: all 1s;
    }

    .green {
      background-image: linear-gradient(to right, #25aae1, #40e495);
      box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
    }

    .purple {
      background-image: linear-gradient(to right, #6253e1, #852D91);
      box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
    }

    .purple:hover:before {
      background-position: left bottom;
    }

    .green:hover:before {
      background-position: left bottom;
    }

冰冻效果.gif

七.闪亮效果

HTML

 <button class="shiny-shadow"><span>Hover me</span></button>

CSS

   .shiny-shadow {
      border: 2px solid white;
      background: transparent;
      text-transform: uppercase;
      color: white;
      padding: 15px 50px;
      outline: none;
      overflow: hidden;
      position: relative;
      background: #1c2541;
    }

    span {
      z-index: 20;
    }

    .shiny-shadow:after {
      content: '';
      display: block;
      position: absolute;
      top: -36px;
      left: -100px;
      background: white;
      width: 50px;
      height: 125px;
      opacity: 20%;
      transform: rotate(-45deg);
    }

    .shiny-shadow:hover:after {
      left: 120%;
      transition: all 800ms cubic-bezier(0.3, 1, 0.2, 1);
      -webkit-transition: all 800ms cubic-bezier(0.3, 1, 0.2, 1);
    }

闪亮效果.gif

八.加载效果

HTML

  <button class="loading-btn"><span>Hover me</span></button>

CSS

    .loading-btn {
      background: transparent;
      border: 0;
      border-radius: 0;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 20px;
      padding: 15px 50px;
      position: relative;
    }

    .loading-btn:before {
      transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
      content: '';
      width: 1%;
      height: 100%;
      background: #ff5964;
      position: absolute;
      top: 0;
      left: 0;
    }

    .loading-btn span {
      mix-blend-mode: darken;
    }

    .loading-btn:hover:before {
      background: #ff5964;
      width: 100%;
    }

加载效果.gif