Button tips
8.22'22
button 和 a 点击后的变化
:active
仅当按下鼠标左键或触摸屏幕时生效
-
button:
:hover
(mobile),:focus
,:active
-
a:
:link
,:visited
,:hover
,:active
a:link { color: blue; } /* Unvisited links */
a:visited { color: purple; } /* Visited links */
a:hover { background: yellow; } /* Hovered links */
a:active { color: red; } /* Active links */
p:active { background: #eee; } /* Active paragraphs */
This paragraph contains a link: This link will turn red while you click on it. The paragraph will get a gray background while you click on it or the link.
涟漪 / ripple effect
纯 CSS 实现
<button class="ripple">BUTTON</button>
/* Ripple effect */
.ripple {
background-position: center;
transition: background 0.8s;
}
.ripple:active {
background-color: #6eb9f7;
background-size: 100%;
transition: background 0s;
}
/* Button style */
.ripple:hover {
background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}
button {
border: none;
border-radius: 2px;
padding: 12px 18px;
font-size: 16px;
cursor: pointer;
color: white;
background-color: #2196f3;
box-shadow: 0 0 4px #999;
outline: none;
}
3d button box shadow
<button class="btn">Button Text</button>
.btn {
display: inline-block;
background: #4285f4;
color: #fff;
text-transform: uppercase;
padding: 20px 30px;
border-radius: 5px;
outline: none;
border: none;
box-shadow: 0px 17px 10px -10px rgba(0,0,0,0.4);
transition: all ease-in-out 300ms;
}
.btn:hover {
box-shadow: 0px 37px 20px -20px rgba(0,0,0,0.2);
transform: translate(0px, -10px) scale(1.2);
}
按钮按下效果 / button click effect
.btn {
position: relative;
top: 0;
box-shadow: 0px 5px #028d96;
text-align: center;
background: #00ddeb;
color: white;
}
.btn:hover {
box-shadow: 0px 4px #006066;
background: #01d1de;
}
/* Imitate a pressed effect for buttons */
.btn:active {
top: 4px;
box-shadow: 0px 0px;
}
📖