CSS按钮鼠标悬停效果（背景颜色渐变动画）
本文给大家介绍一款按钮的鼠标悬停效果，是纯CSS实现的，鼠标移上按钮后，按钮背景颜色随之变化。这个效果使用非常广泛，非常多的网页都用上了这个效果。
demodownload
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;
}
.button 设置按钮的颜色等样式属性，.button:hover 和 .button:active 设置按钮鼠标悬停后的变化效果，.button.-primary 设置按钮的样式。
execcodegetcode
您可能对以下文章也感兴趣
- 纯CSS3：鼠标移上去三角形(箭头)旋转【实例演示#源码下载】
- CSS悬停效果按钮一简单实例（鼠标移到按钮上变成其他颜色）
- 漂亮的css3圆形鼠标悬停效果实例
- 使用css转换和3d旋转的圆形鼠标悬停效果【2例】
- 很好看的css3动画按钮鼠标悬停效果【2个实例】
- 漂亮悬停效果的CSS3动画按钮【5个实例代码】
- span标签写法问题导致ie8 hover失效
