<button class="btn waves">确定</button>
.btn {
width: 153px;
height: 40px;
background: #f39b18;
border: none;
border-radius: 4px;
font-family: Helvetica;
font-size: 16px;
color: #ffffff;
}
消除按钮默认点击蓝色边框效果
- 在<button>的
css样式
中添加:
.btn {
outline: none; //消除默认点击蓝色边框效果
}
鼠标经过按钮变色
- 利用
:hover
实现:
.btn:hover {
opacity: 0.8; //调整透明度
}
效果图:
用CSS实现按钮点击水波纹效果
- 主要借助
:after
伪类及CSS3中的transform
和transition
属性:
.waves {
position: relative;
overflow: hidden;
}
.waves:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #666 10%, transparent 10%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: .3s, opacity .5s;
}
.waves:active:after {
transform: scale(0, 0);
opacity: 0.3;
transition: 0s;
}
效果图: