CSS Button Hover Effects

2025年3月17日 | 阅读 12 分钟

在网页设计中，按钮非常重要。按钮是可点击的元素，用于与用户交互，以便用户可以轻松地浏览网站。它为网页提供了吸引人的外观，并增强了网站的用户体验。虽然您可以使用 CSS 属性来设置按钮样式，使其更具吸引力，但您也可以在按钮上创建悬停效果，使其脱颖而出。

CSS 按钮悬停效果用于增加互动元素，这使得用户更有可能点击按钮并发现网站的其他部分。如果您想让您的网页看起来更有吸引力，并对用户更具吸引力，那么就在您的网站上应用 CSS 按钮悬停效果。

CSS 按钮悬停效果的类型

有许多悬停效果可以应用到按钮上，以增强您网页的外观。让我们通过示例来看一些 CSS 按钮悬停效果。

1. 圆形按钮悬停效果

此效果用于将按钮的形状更改为圆形。当用户将鼠标悬停在按钮上时，按钮会变成圆形。

演示圆形按钮悬停效果的示例

<!DOCTYPE html>
<html>
<head>
  <title>CIRCULAR BUTTON HOVER EFFECT</title>
  <style>
.circular-button {
  width: 125px;
  height: 125px;
  background-color: #fca847;
  color: rgb(255, 255, 255);
  font-size: 18px;
  cursor: pointer;
  border: none;
  transition: border-radius 0.2s ease-in;
}
.circular-button:hover {
    border-radius: 50%;
}
  </style>
</head>
<body>
  <button class="circular-button">Hover Me</button>
</body>
</html>

输出

2. 霓虹灯按钮悬停效果

此效果用于在按钮上创建明亮的光线，这意味着当用户将鼠标悬停在按钮上时，它会显示出类似霓虹灯的效果。

演示霓虹灯按钮悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>NEON LIGHT BUTTON HOVER EFFECT</title>
    <style>
        body{
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #065412;
            min-height: 50vh;
        }
        .neon-button{
            position: relative;
            display: inline-block;
            color: #72fa7c;
            padding: 16px 31px;
            font-size: 20px;
            overflow: hidden;
        }
        .neon-button:hover{
            background: #72fa7c;
            color: #f1faf3;
            box-shadow: 0 0 10px #72fa7c, 0 0 40px #72fa7c, 0 0 80px #72fa7c;
        } 
    </style>
</head>
<body>
    <button class="neon-button">Hover me</button>
</body>
</html>

输出

3. 闪亮阴影按钮悬停效果

此效果用于照亮按钮，这意味着当用户将鼠标悬停在按钮上时，它会显得闪亮，就像光从按钮表面反射出来一样。

演示闪亮阴影按钮悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>SHINY SHADOW BUTTON HOVER EFFECT</title>
    <style>
        body{
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 60vh;
        }
     .shiny-shadow-button {
        color: white;
        background-color: #1039f0;
        padding: 10px 20px;
        font-size: 18px;
        cursor: pointer;
        border: none;
        position: relative;
        overflow: hidden;
        }
.shiny-shadow-button::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 0;
        width: 0;
        background-color: rgba(246, 246, 226, 0.4);
        border-radius: 50%;
        opacity: 0;
        transition: all 0.5s ease;
        }
.shiny-shadow-button:hover::before {
  height: 120%;
  width: 120%;
  opacity: 1;
  transition: all 0.5s ease;
  animation: shine 2s infinite;
}
@keyframes shine {
  0% {
    transform: translate(-50%, -50%) scale(0.7);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
}
    </style>
</head>
<body>
    <button class="shiny-shadow-button">Hover me</button>
</body>
</html>

输出

4. 按钮悬停时的滑动填充效果

此效果在按钮上产生滑动效果。当用户将鼠标悬停在按钮上时，它会显示一个滑动效果。这种效果可以为按钮增加动态和互动的元素。

演示按钮悬停时滑动填充效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>SLIDE FILL BUTTON HOVER EFFECT</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .button1{
            position: absolute;
            top: 50%;
            left: 50%;
            text-align: center;
            transform: translate(-50%, -50%);
        }
        .button2{
            position: absolute;
            top: 60%;
            left: 60%;
            text-align: center;
            transform: translate(-85%, -85%);
        }
        button{
            border: 1px solid ease;
            background: none;
            text-transform: uppercase;
            font-family: Arial, Helvetica, sans-serif;
            padding: 14px 22px;
            margin: 10px;
            min-width: 220px;
            cursor: pointer;
            transition: color 0.5s linear;
        }
        button:hover{
            color: #e93737;
        }
        button::before{
            content: "";
            top: 0;
            left: 0;
            position: absolute;
            height: 100%;
            width: 100%;
            background: #f7f730;
            z-index: -1;
            transform-origin: 0 0;
            transition: transform 0.5s;
            transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
        }
        .button1::before{
            transform: scaleX(0);
        }
        .button2::before{
            transform: scaleY(0);
        }
        .button1:hover::before{
            transform: scaleX(1);
        }
        .button2:hover::before{
            transform: scaleY(1);
        }
    </style>
</head>
<body>
   <div class="btn">
    <button class="button1">Hover Me</button>
    <button class="button2">Hover Me</button>
   </div> 
</body>
</html>

输出

5. 绘制边框按钮悬停效果

此效果用于在按钮周围绘制边框，这意味着当网站访问者将鼠标悬停在按钮上时，其边框会以动画形式被绘制出来。

演示绘制边框按钮悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DRAW BORDER BUTTON HOVER EFFECT</title>
    <style>
body{
    background-color: #a03925;
}
button{
    font-family: 'Poppins',sans-serif;
    position: absolute;
    height: 100px;
    width: 300px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #a03925;
    border: 6px solid #f6fcf9;
    color: #f6fcf9;
    font-size: 25px;
    cursor: pointer;
    outline: none;
}
button::before{
    content: "";
    position: absolute;
    height: 25px;
    width: 300px;
    background-color: #a03925;
    margin: auto;
    left: -5px;
    right: 0;
    bottom: -6px;
    transition: width 0.5s,
                height 0.5s 0.5s;
}
button::after{
    content: "";
    position: absolute;
    height: 25px;
    width: 300px;
    background-color: #a03925;
    margin: auto;
    left: -5px;
    right: 0;
    top: -6px;
    transition: width 0.5s,
                height 0.5s 0.5s;
}
button:hover::before,
button:hover::after{
    width: 0;
    height: 6px;
    transition: height 0.5s,
                width 0.5s 0.5s;
}
    </style>
</head>
<body>
  <button class="draw">Hover me</button>  
</body>
</html>

输出

6. 渐变按钮悬停效果

此效果用于在按钮周围应用渐变边框，这意味着当用户将鼠标悬停在按钮上时，其边框会以渐变效果进行动画处理。

演示渐变按钮悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Gradient Button Hover Effect</title>
    <style>
 .gradient-button {
  display: flex;
  padding: 20px;
  width: 150px;
  height: 65px;
  background: linear-gradient(90deg, #c3ed8e, transparent) #f387ec;
  font-size: 18px;
  color: rgb(80, 65, 65);
  place-content: center;
  transition: background-color 1s;

}
.gradient-button:hover, .gradient-button:focus {
  background-color: #2f9041;
  color: rgb(80, 65, 65);
}
  </style>
</head>
<body>
  <button class="gradient-button">Hover me</button>  
</body>
</html>

输出

7. Clip-Path 按钮悬停效果

此效果用于更改按钮的形状。当用户将鼠标悬停在按钮上时，其形状会发生改变。

演示 clip-path 按钮悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CLIP-PATH BUTTON HOVER EFFECT</title>
    <style>
.clip-path {
  padding: 15px 25px;
  font-size: 18px;
  background-color: #8780f6;
  cursor: pointer;
  color: white;
  border: none;
}
.button-1:hover {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.button-2:hover {
  clip-path: circle(60%);
}
  </style>
</head>
<body>
  <button class="clip-path button-1">Hover me</button>
  <button class="clip-path button-2">Hover me</button> 
</body>
</html>

输出

8. 滑动按钮悬停效果

此效果用于在按钮上应用滑动效果，这意味着当用户将鼠标悬停在按钮上时，它会显示一个滑动效果。

演示滑动按钮悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>SWIPE BUTTON HOVER EFFECT</title>
    <style>
      body{
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50vh;
        background-color: firebrick;
      }
        .swipe-button {
        padding: 12px 25px;
        color: rgb(186, 25, 25);
        background-color: #46f583;
        font-size: 20px;
        position: relative;
        border: none;
        cursor: pointer;
        overflow: hidden;
      }
      .swipe-button::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: -100%;
        background-color: rgba(15, 116, 77, 0.2);
        transition: left 0.3s ease;
      }
      .swipe-button:hover::before {
        left: 100%;
      }
    </style>
</head>
<body>
  <button class="swipe-button">Hover me</button>
</body>
</html>

输出

9. Box-Shadow 按钮悬停效果

此效果用于在按钮上应用盒子阴影效果，这意味着当用户将鼠标悬停在按钮上时，它会显示盒子阴影效果。

演示 box-shadow 按钮悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>BOX-SHADOW EFFECT ON HOVER OVER THE BUTTON</title>
    <style>
      body{
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50vh;
        background-color:darkorange;
      }
 .box-shadow-button {
  padding: 18px 24px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  border: none;
  cursor: pointer;
  background-color: #0e66a0;
  color: wheat;
  font-size: 20px;
  transition: box-shadow 0.3s ease;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}
.box-shadow-button:hover {
  box-shadow: 0px 6px 12px #542d0a;
}
    </style>
</head>
<body>
  <button class="box-shadow-button">Hover Me!</button>
</body>
</html>

输出

10. 按钮悬停时背景颜色变化效果

此效果用于更改按钮的背景，这意味着当用户将鼠标悬停在按钮上时，它会改变按钮的背景。

演示背景颜色变化悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>BACKGROUND COLOR CHANGE EFFECT ON HOVER OVER THE BUTTON</title>
    <style>
       body{
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 40vh;
        }
        .background-color-change-button{
        padding: 18px 24px;
        background-color: #3e8f08;
        color: white;
        font-size: 18px;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
        }
        .background-color-change-button:hover {
        background-color: #de8c11;
        }
    </style>
</head>
<body>
  <button class="background-color-change-button">Hover Me!</button>
</body>
</html>

输出

11. 按钮悬停时的箭头效果

此效果用于在按钮上创建一个箭头，这意味着当用户将鼠标悬停在按钮上时，它会在按钮上显示箭头。

演示箭头按钮悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ARROW EFFECT ON HOVER OVER THE BUTTON</title>
    <style>
      button {
        padding: 18px 28px;
        border-radius: 6px;
        background-color: #f5f232;
        color: #211e1e;
        text-align: center;
        width: 250px;
        border: none;
        font-size: 30px;
        transition: all 0.5s;
        cursor: pointer;
        margin: 100px;
        }

.arrow-button{
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: 0.5s;
}
.arrow-button:after {
  content: '?';
  opacity: 0; 
  position: absolute; 
  top: 18px;
  right: -21px;
  transition: 0.5s;
}
.arrow-button:hover{
  padding-right: 25px;
  padding-left: 10px;
}
.arrow-button:hover:after {
  opacity: 1;
  right: 10px;
}  
    </style>
</head>
<body>
    <button class="arrow-button"><span>Hover me</span></button>
</body>
</html>

输出

12. 光线反射按钮悬停效果

此效果用于在按钮上创建光线反射，这意味着当用户将鼠标悬停在按钮上时，它会在按钮上显示光线反射。

演示光线反射按钮悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>LIGHT REFLECTION BUTTON HOVER EFFECT</title>
    <style>
    body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: antiquewhite;
        min-height: 45vh;
        }
    .button {
        width: 100%;
        height: 100%;
        text-align: center;
        margin: 0 auto;
        }
    .light-reflection {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        letter-spacing: 2px;
        line-height: 50px;
        max-width: 150px;
        font-size: 20px;
        font-weight: bolder;
        width: 100%;
        position: relative;
        text-decoration: none;
        }
    .light-reflection {
        border: 4px solid #f89c9c;
        color: #904949;
        box-shadow:0px 0px 0px 1px #f89c9c inset;
        background-color: #f89c9c;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
        }
    .light-reflection:hover {
        text-decoration: none;
        background-color: white;
        border: 4px solid #f89c9c;
        box-shadow:0px 0px 0px 4px #fcf1f1 inset;
        }
    .light-reflection:after {
        background: #fcc3c3;
        border: 0px solid #f89c9c;
        content: "";
        height: 160px;
        position: absolute;
        opacity: .9;
        width: 50px;
        top: -50px;
        left: -85px;
        -Webkit-transform: rotate(35deg);
                transform: rotate(35deg);
        transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
        z-index: 1;
        }
    .light-reflection:hover:after {
        background: #f4d1d1;
        border: 20px solid #f89c9c;
        left: 120%;
        opacity: 0;
        -webkit-transform: rotate(40deg);
                transform: rotate(40deg);
        }
    </style>
</head>
<body>
    <div class="button">
        <button class="light-reflection">Hover Me!</button>
    </div>
</body>
</html>

输出

13. 按钮悬停时的对角线过渡效果

此效果用于在按钮上创建对角线过渡，这意味着当用户将鼠标悬停在按钮上时，它会在按钮上显示对角线过渡效果。

例如，要演示对角线过渡效果，请将鼠标悬停在按钮上

<!DOCTYPE html>
<html lang="en">
<head>
  <title>DIAGONAL LINE TRANSITION ON HOVER OVER THE BUTTON:</title>
  <style>
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(55, 244, 181);
    height: 75vh;
    }
.diagonal-line {
  position: relative;
  color: #0c4d86;
  text-align: center;
  height: 55px;
  line-height: 55px;
  transition: 0.5s;
  padding: 0 25px;
  background-color: transparent;
  cursor: pointer;
  border: 2px solid #0c4d86;
}
.diagonal-line:hover {
  border: 2px solid rgba(0, 0, 0, 0);
  color: #fa9740;
}

.diagonal-line::before,
.diagonal-line::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    transform: scale(0);
    transition: 0.5s;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    }
.diagonal-line::before {
  border-bottom: 3px solid #fa9740;
  border-left: 3px solid #fa9740;
  transform-origin: 100% 0%;
}
.diagonal-line::after {
  border-top: 3px solid #fa9740;
  border-right: 3px solid #fa9740;
  transform-origin: 0% 100%;
}
.diagonal-line:hover::after,
.diagonal-line:hover::before {
  transform: scale(1);
}
  </style>
</head>
<body>
  <div class="container">
    <button class="diagonal-line">Hover Me!</button>
  </div>
</body>
</html>

输出

14. 按钮扩展和渐变叠加悬停效果

此效果用于按钮扩展和渐变叠加悬停效果，这意味着当用户将鼠标悬停在按钮上时，它会扩展并带有渐变叠加悬停效果。

演示按钮扩展和渐变叠加悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>BUTTON EXPANSION AND GRADIENT OVERLAY HOVER EFFECT</title>
  <style>
    body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.btn {
  position: fixed;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  top: 0%;
  left: 0%;
  background-color: #c4e1f9;
}

.hover-button {
  font-family:'Courier New', Courier, monospace;
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  font-size: 3rem;
  border: none;
  cursor: pointer;
  color: #f1dddd;
  background-color: #8a44f4;
  border-radius: 10rem;
  padding: 1.5rem 4rem 2rem;
  transform-style: preserve-3d;
  transition: all 0.6s ease;
}

.hover-text {
  position: relative;
  z-index: 6;
}

.hover-button:after {
  content: "";
  background: linear-gradient(56deg, #6fdefd 0%, #d8cdfa 46%, #fb0a76 100%);
  position: absolute;
  width: 80%;
  height: 20%;
  filter: blur(15px);
  border-radius: 10rem;
  bottom: -4px;
  left: 10%;
  opacity: 0;
  transform: translateZ(-1px);
  transition: opacity 0.6s ease;
}

.hover-button:before {
  content: "";
  background: linear-gradient(56deg, #6fdefd 0%, #d8cdfa 46%, #fb0a76 100%);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  border-radius: 10rem;
  transition: opacity 0.4s ease;
}

.hover-button:hover {
  transition: all 0.6s ease;
  transform: translate(-50%, -50%) scale(1.35);
  transform-origin: center;

  &:after,
  &:before {
    opacity: 1;
    transition: opacity 0.6s ease;
  }
}

  </style>
</head>
<body>
  <div class="btn">
    <button class="hover-button">
      <span class="hover-text">Hover Me</span>
    </button>
  </div>
</body>
</html>

输出

15. 条纹按钮悬停效果

此效果用于在按钮上创建水平或对角条纹，这意味着当用户将鼠标悬停在按钮上时，它会在按钮上显示条纹效果。

演示条纹按钮悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>STRIPED BUTTON HOVER EFFECT</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 65vh;
            margin: 0;
            padding: 0;
            background-color: #f2ebeb;
        }
        .striped-button {
            padding: 20px 35px;
            display: inline-block;
            color: white;
            background-color: #397909;
            border: none;
            cursor: pointer;
            font-weight: bold;
            position: relative;
            border-radius: 25px;
            font-size: 19px;
            overflow: hidden;
            background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(249, 235, 235, 0.3) 5px, rgba(249, 235, 235, 0.3) 10px);
            transition: background-position 0.3s;
            background-size: 250% 250%;
        }

        .striped-button:hover {
            background-position: 100% 100%;
        }
    </style>
</head>
<body>
    <button class="striped-button">Hover Me!</button>
</body>
</html>

输出

16. 对角线叠加按钮悬停效果

此效果用于创建一个从按钮的一个角延伸到另一个角的对角线叠加层。这意味着当用户将鼠标悬停在按钮上时，它会在按钮上显示对角线叠加效果。

演示对角线叠加按钮悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DIAGONAL OVERLAY BUTTON HOVER EFFECT</title>
    <style>
        body {
            margin: 0;
            height: 100%;
            background: linear-gradient(to top, #f6d365 0%, #fda085 100%);
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
            height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .diagonal-overlay-button {
            border: none;
            display: block;
            cursor: pointer;
            outline: none;
            overflow: hidden;
            position: relative;
            text-transform: uppercase;
            color: black;
            font-weight: 700;
            font-size: 15px;
            margin: 0 auto;
            background-color:rgb(49, 211, 211);
            padding: 15px 55px;
            box-shadow: 0 5px 15px rgba(86, 83, 83, 0.2);
            transition: all 0.5s ease-in-out;
        }
        .diagonal-overlay-button span {
            position: relative;
            z-index: 1;
        }
        .diagonal-overlay-button:after {
            content: "";
            position: absolute;
            height: 450%;
            width: 135%;
            left: 0;
            top: 0;
            background: #da5ca7;
            transition: all 0.5s ease-in-out;
            transform: translateX(-98%) translateY(-25%) rotate(45deg);
        }
        .diagonal-overlay-button:hover:after {
            transform: translateX(-9%) translateY(-25%) rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="btn">
        <button class="diagonal-overlay-button"><span>Hover Me!</span></button>
    </div>
</body>
</html>

输出

17. 菱形边框按钮悬停效果

此效果用于在按钮上创建菱形边框动画，这意味着当用户将鼠标悬停在按钮上时，它会在按钮上显示菱形边框动画。

演示菱形边框按钮悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DIAMOND BORDER BUTTON HOVER EFFECT</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f2f2f2;
            height: 75vh;
        }
        .btn {
            cursor: pointer;
            position: relative;
            padding: 12px 21px;
            background: #5987a6;
            color: #fef5f5;
            font-size: 24px;
            border-bottom-left-radius: 15px;
            border-top-right-radius: 15px;
            transition: all 1s;
        }
        .btn:after,
        .btn:before {
            content: " ";
            position: absolute;
            height: 5px;
            width: 5px;
            border: 0px solid #fef5f5;
            transition: all 1s;
        }
        .btn:after {
            top: -1px;
            left: -1px;
            border-top: 5px solid #15709b;
            border-left: 5px solid #15709b;
        }
        .btn:before {
            bottom: -1px;
            right: -1px;
            border-bottom: 5px solid #15709b;
            border-right: 5px solid #15709b;
        }
        .btn:hover {
            border-top-right-radius: 0px;
            border-bottom-left-radius: 0px;
            &:before,
            &:after {
                width: 100%;
                height: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <button class="btn">Hover Me!</button>
    </div>
</body>
</html>

输出

18. 气泡着色按钮悬停效果

此效果用于在按钮上创建气泡着色效果，这意味着当用户将鼠标悬停在按钮上时，它会在按钮上显示气泡着色效果。

演示气泡着色按钮悬停效果的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title> BUBBLE COLORING BUTTON HOVER EFFECT</title>
    <style>
       body {
          margin: 0;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: beige;
          height: 60vh;
      }
      .bubble-button {
          --c: rgb(138, 58, 18);
          color: var(--c);
          border: 0.3em solid var(--c);
          font-size: 18px;
          border-radius: 20%;
          background-color:antiquewhite;
          width: 240px;
          height: 60px;
          position: relative;
          overflow: hidden;
          text-align: center;
          font-family: Verdana, Geneva, Tahoma, sans-serif;
          font-weight: bold;
          letter-spacing: 2px;
          line-height: 3em;
          z-index: 1;
          transition: 0.5s;
      }
      .bubble-button span {
          position: absolute;
          background-color: var(--c);
          width: 25%;
          height: 100%;
          border-radius: 50%;
          left: calc((var(--n) - 1) * 25%);
          transform: translateY(150%);
          transition: 0.5s;
          transition-delay: calc((var(--n) - 1) * 0.1s);
          z-index: -1;
      }
      .bubble-button:hover {
          color: white;
      }
      .bubble-button:hover span {
          transform: translateY(0) scale(2);
      }
      .bubble-button span:nth-child(1) {
          --n: 1;
      }
      .bubble-button span:nth-child(2) {
          --n: 2;
      }
      .bubble-button span:nth-child(3) {
          --n: 3;
      }

      .bubble-button span:nth-child(4) {
          --n: 4;
      }
    </style>
</head>
<body>
  <button class="bubble-button">
    Hover Me!<span></span><span></span><span></span><span></span></button>
</body>
</html>

输出

结论

在本文中，我们通过示例了解了各种 CSS 按钮悬停效果。您可以在按钮元素上使用这些效果来改善用户体验。

下一个主题CSS 速查表

CSS Button Hover Effects

CSS 按钮悬停效果的类型

1. 圆形按钮悬停效果

2. 霓虹灯按钮悬停效果

3. 闪亮阴影按钮悬停效果

4. 按钮悬停时的滑动填充效果

5. 绘制边框按钮悬停效果

6. 渐变按钮悬停效果

7. Clip-Path 按钮悬停效果

8. 滑动按钮悬停效果

9. Box-Shadow 按钮悬停效果

10. 按钮悬停时背景颜色变化效果

11. 按钮悬停时的箭头效果

12. 光线反射按钮悬停效果

13. 按钮悬停时的对角线过渡效果

14. 按钮扩展和渐变叠加悬停效果

15. 条纹按钮悬停效果

16. 对角线叠加按钮悬停效果

17. 菱形边框按钮悬停效果

18. 气泡着色按钮悬停效果

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Button Hover Effects

CSS 按钮悬停效果的类型

1. 圆形按钮悬停效果

2. 霓虹灯按钮悬停效果

3. 闪亮阴影按钮悬停效果

4. 按钮悬停时的滑动填充效果

5. 绘制边框按钮悬停效果

6. 渐变按钮悬停效果

7. Clip-Path 按钮悬停效果

8. 滑动按钮悬停效果

9. Box-Shadow 按钮悬停效果

10. 按钮悬停时背景颜色变化效果

11. 按钮悬停时的箭头效果

12. 光线反射按钮悬停效果

13. 按钮悬停时的对角线过渡效果

14. 按钮扩展和渐变叠加悬停效果

15. 条纹按钮悬停效果

16. 对角线叠加按钮悬停效果

17. 菱形边框按钮悬停效果

18. 气泡着色按钮悬停效果

结论

相关帖子

CSS border-image

Less CSS

CSS Color Palette

CSS Login

CSS Animation keyframes

CSS justify-content

background-size

CSS 垂直对齐

CSS 表格样式

CSS transition-delay

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器