پیشنمایش زنده
کد HTML
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path fill="currentColor" d="M20 17h2v2H2v-2h2v-7a8 8 0 1 1 16 0v7zm-2 0v-7a6 6 0 1 0-12 0v7h12zm-9 4h6v2H9v-2z"></path>
</svg>
</button>
کد CSS
button {
background: none;
border: none;
padding: 15px 15px;
border-radius: 10px;
}
button:hover {
background: rgba(170, 170, 170, 0.062);
transition: 0.5s;
}
button svg {
color: #fff;
}
button:active {
animation-name: shake;
animation-duration: 0.5s;
animation-iteration-count: 1;
}
@keyframes shake {
0% {
transform: translateX(0);
}
10% {
transform: translateX(-10px);
}
20% {
transform: translateX(10px);
}
30% {
transform: translateX(-10px);
}
40% {
transform: translateX(10px);
}
50% {
transform: translateX(-10px);
}
60% {
transform: translateX(10px);
}
70% {
transform: translateX(-10px);
}
80% {
transform: translateX(10px);
}
90% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}