高光按钮

css 径向渐变实用案例（高光按钮，炫彩按钮，点击按钮--圆形扩散，波形效果–优惠劵）_ide

button {
    color: #fff;
    background-color: #2a80eb;
    background-image: radial-gradient(160% 100% at 50% 0%, hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, 0) 52%);
}

效果详见
​​​https://demo.cssworld.cn/new/5/1-2.php​​

炫彩按钮

css 径向渐变实用案例（高光按钮，炫彩按钮，点击按钮--圆形扩散，波形效果–优惠劵）_ide_02

button {
    color: #fff;
    background-color: #2a80eb;
    background-image: radial-gradient(farthest-side at bottom left, rgba(255, 0, 
255, .5), transparent),
        radial-gradient(farthest-corner at bottom right, rgba(255, 255, 50, .5), 
transparent);
}

效果详见
​​​https://demo.cssworld.cn/new/5/1-2.php​​

点击按钮，圆形扩散

css 径向渐变实用案例（高光按钮，炫彩按钮，点击按钮--圆形扩散，波形效果–优惠劵）_html_03

button {
    color: #fff;
    background: #2a80eb no-repeat center;
    background-image: radial-gradient(closest-side circle, rgba(255, 70, 70, .9), 
rgba(255, 70, 70, .9) 99%, rgba(255, 70, 70, 0) 100%);
    background-size: 0% 0%;
    transition: background-size .2s;
}
.button-c:active {
    background-size: 250% 250%;
}

效果详见
​​​https://demo.cssworld.cn/new/5/1-2.php​​

波形效果–优惠劵

css 径向渐变实用案例（高光按钮，炫彩按钮，点击按钮--圆形扩散，波形效果–优惠劵）_php_04

<div class="radial-wave"></div>
.radial-wave {
    width: 200px; height: 100px;
    background: linear-gradient(to top, transparent 10px, red 10px) no-repeat,
        radial-gradient(20px 15px at left 50% bottom 10px, red 10px, transparent 11px);
    background-size: auto, 20px 10px;
}

效果详见
​​​https://demo.cssworld.cn/new/5/1-3.php​​