#html #css #animation #button
Вопрос:
Я нашел кнопку на веб-сайте, которая имеет анимацию кнопки Google.
Как вы делаете такую кнопку, чтобы она создавала анимацию везде, где вы нажимаете?
Вот мой код, что я сделал до сих пор:
button {
text-transform: uppercase;
padding: 0.8em;
width: 100px;
background: #0053d9;
color: #fff;
border: none;
border-radius: 5px;
transition: all 0.2s;
font-size: 15px;
font-weight: 500;
}
button:hover {
filter: brightness(80%);
cursor: pointer;
}
button:active {
transform: scale(0.92)
} <button>Login</button> Комментарии:
1. Вам придется использовать JS, а также CSS, чтобы заставить «рябь» выходить из того места, где находится мышь, но если вы хотите, чтобы рябь выходила из середины кнопки, это возможно с помощью чистого CSS. Какой из этих 2 вариантов вы хотите?
2. Как сказал @AlphaHowl, вам нужно будет использовать Javascript, если вы хотите, чтобы рябь исходила оттуда, где находится мышь. Вы можете обратиться к этому примеру, чтобы создать аналогичную кнопку codepen.io/BretCameron/pen/mdPMVaW
3. @AlphaHowl Честно говоря, я бы хотел иметь версию JS, но версия CSS тоже была бы хороша
4. Ладно, держись….
5. @PR7 о, это тоже круто! Спасибо!
Ответ №1:
Этот эффект известен как эффект материальной пульсации (или, по крайней мере, так его называет большинство людей).
Есть два способа добиться этого эффекта — один с использованием JS и CSS для полноценного эффекта, что означает, что рябь исходит из того места, где находится мышь, и один с использованием чистого CSS и без JS, что приводит к появлению ряби на кнопке независимо от того, где мышь находится внутри кнопки.
Некоторые люди предпочитают CSS-только один, так как он чище, но большинство предпочитают полноценную версию, так как она учитывает положение мыши и, следовательно, обеспечивает немного лучший опыт…
В любом случае, я создал оба этих эффекта, выбрал то, что вы предпочитаете :).
PS: вот правила для любых полноценных версий, которые вы видите:
- Пульсация должна создаваться, когда мышь нажата на кнопку, а не при щелчке мыши, потому что на мобильных устройствах это занимает дополнительные сто миллисекунд (поскольку мобильные браузеры задерживают доставку события щелчка, чтобы иметь возможность проверить, является ли это одним щелчком или двойным щелчком). Таким образом, с помощью такого далая, прежде чем показывать рябь, пользовательский опыт резко снижается, так как ваш сайт будет казаться медленным и отстающим, хотя, вероятно, это не так.
- Рябь должна оставаться на кнопке и покрывать ее фон до тех пор, пока мышь не будет поднята, или кнопка не потеряет фокус — в зависимости от того, что произойдет раньше.
Без лишних слов, вот код…
window.addEventListener("mousedown", e => {
const target = e.target;
if(target.nodeName == "BUTTON" amp;amp; !target.classList.contains("css-only-ripple")) {
show_ripple(target);
}
});
function show_ripple(button) {
const style = getComputedStyle(button);
let ripple_elmnt = document.createElement("span");
let diameter = Math.max(parseInt(style.height), parseInt(style.width)) * 1.5;
let radius = diameter / 2;
ripple_elmnt.className = "ripple";
ripple_elmnt.style.height = ripple_elmnt.style.width = diameter "px";
ripple_elmnt.style.position = "absolute";
ripple_elmnt.style.borderRadius = "1000px";
ripple_elmnt.style.pointerEvents = "none";
ripple_elmnt.style.left = event.clientX - button.offsetLeft - radius "px";
ripple_elmnt.style.top = event.clientY - button.offsetTop - radius "px";
ripple_elmnt.style.transform = "scale(0)";
ripple_elmnt.style.transition = "transform 500ms ease, opacity 400ms ease";
ripple_elmnt.style.background = "rgba(255,255,255,0.5)";
button.appendChild(ripple_elmnt);
setTimeout(() => {
ripple_elmnt.style.transform = "scale(1)";
}, 10);
button.addEventListener("mouseup", e => {
ripple_elmnt.style.opacity = 0;
setTimeout(() => {
try {
button.removeChild(ripple_elmnt);
} catch(er) {}
}, 400);
}, {once: true});
button.addEventListener("blur", e => {
ripple_elmnt.style.opacity = 0;
setTimeout(() => {
try {
button.removeChild(ripple_elmnt);
} catch(er) {}
}, 450);
}, {once: true});
} button {
text-transform: uppercase;
padding: 0.8em;
width: 100px;
background: #0053d9;
color: #fff;
border: none;
border-radius: 5px;
transition: all 0.2s;
font-size: 15px;
font-weight: 500;
position: relative;
overflow: hidden;
}
button:hover {
filter: brightness(80%);
cursor: pointer;
}
button:active {
transform: scale(0.92)
}
.css-only-ripple::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 150%;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%) scale(0);
pointer-events: none;
border-radius: 999px;
background: rgba(255, 255, 255, .5);
}
.css-only-ripple:focus::after {
animation: scale_up 1000ms forwards;
}
@keyframes scale_up {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
} <button>Login</button>
<button class="css-only-ripple">Login</button>
<br>
The first button is the CSS and JS version, and the second is the CSS-only version. For the CSS-only button, you have to unfocus it before you click it again or the ripple will not show (it only gets created on focus) Комментарии:
1. С удовольствием : )