CSS按钮鼠标悬停效果（背景颜色渐变动画）

技术频道 - html技术

CSS按钮鼠标悬停效果（背景颜色渐变动画）

作者:admin 时间:2022-1-18 18:11:58 浏览:

本文给大家介绍一款按钮的鼠标悬停效果，是纯CSS实现的，鼠标移上按钮后，按钮背景颜色随之变化。这个效果使用非常广泛，非常多的网页都用上了这个效果。

HTML

HTML代码里，第一个按钮，button使用button的CSS属性；第二个按钮，button使用了两个CSS属性，button和-primary。

<div>
  <input class="input" type="text"/>
  <button class="button">Button</button>
  <button class="button -primary">Button</button>
</div>

CSS

.button {
  padding: 1rem 2rem;
  border-color: #171d27;
  background-color: #fff;
  background-image: radial-gradient(ellipse at bottom, #f6f6f8 50%, transparent 75%);
  background-position: center bottom;
  background-size: 0% 0%;
  background-repeat: no-repeat;
  font-weight: bold;
  transition: background-size 100ms 0ms ease;
  will-change: background-size, transform;
}
.button:hover {
  background-size: 200% 200%;
  transition: background-size 320ms 0ms ease;
}
.button:active {
  transform: translate3d(0, 0.25rem, 0) scale3d(96%, 96%, 1);
}
.button.-primary {
  background-color: #171d27;
  background-image: radial-gradient(ellipse at bottom, #43526f 50%, transparent 75%);
  color: #fff;
}