CSS八种让人眼前一亮的HOVER效果

一.发送效果

 

HTML

 

      // 这里是一个svg的占位    Send  

 

CSS

 

#send-btn{
      display: flex;  align-items: center;  justify-content: center;  height: 100vh;}
button {
      background: #5f55af;  border: 0;  border-radius: 5px;  padding: 10px 30px 10px 20px;  color: white;  text-transform: uppercase;  font-weight: bold;}
button svg {
      display: inline-block;  vertical-align: middle;  padding-right: 5px;}
button:hover svg {
      animation: fly 2s ease 1;}
@keyframes fly {
      0% {
        transform: translateX(0%);  }
  50% {
        transform: translateX(300%);  }
  100% {
        transform: translateX(0);  }}

 

GIF图

 

 

 

二.霓虹效果

 

HTML

 

  Hover me  Hover me  Hover me

 

CSS

 

#neon-btn {
      display: flex;  align-items: center;  justify-content: space-around;  height: 100vh;  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;  border: 0;}
.one:hover {
      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 {
      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 {
      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

 

 

  Hover me

 

CSS

 

#draw-border {
      display: flex;  align-items: center;  justify-content: center;  height: 100vh;}
button {
      border: 0;  background: none;  text-transform: uppercase;  color: #4361ee;  font-weight: bold;  position: relative;  outline: none;  padding: 10px 20px;  box-sizing: border-box;}
button::before, button::after {
      box-sizing: inherit;  position: absolute;  content: '';  border: 2px solid transparent;  width: 0;  height: 0;}
button::after {
      bottom: 0;  right: 0;}
button::before {
      top: 0;  left: 0;}
button:hover::before, button:hover::after {
      width: 100%;  height: 100%;}
button:hover::before {
      border-top-color: #4361ee;  border-right-color: #4361ee;  transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;}
button: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

 

  
    // 这里有一个svg元素    Hover me  

 

CSS

 

#circle-btn {
      display: flex;  align-items: center;  justify-content: center;  height: 100vh;}
.btn-container {
      position: relative;}
button {
      border: 0;  border-radius: 50px;  color: white;  background: #5f55af;  padding: 15px 20px 16px 60px;  text-transform: uppercase;  background: linear-gradient(to right, #f72585 50%, #5f55af 50%);  background-size: 200% 100%;  background-position: right bottom;  transition:all 2s ease;}
svg {
      background: #f72585;  padding: 8px;  border-radius: 50%;  position: absolute;  left: 0;  top: 0%;}
button:hover {
       background-position: left bottom;}

 

GIF图

 

 

 

五。圆角效果

 

HTML

​​​​​​​

  Hover me