I'm making an Aqua button (from Mac OS X) and one of the many things I must fix is the button pulse, which seems to be very hard to find one to implement that actually (kinda) works
However, I found a (quarter-working) fix that "technically" pulses, but that doesn't fix the new problem of making the entire background pulse instead of the background size. It moves the color of choice (specifically the background) of the @keyframe up and down. So I want the entire background of the button to pulse instead of background-size. The background keyframe for clarity here (focus on the top one).
Here's the CSS code:
@keyframes color {
from {
background-size:50% 50%;
}
to {
background-size:100% 100%;
}
}
:root {
--confirm: linear-gradient(rgb(0, 36, 197),rgb(196, 201, 207));
--cancel: linear-gradient(#AAAAAA,#FFFFFF);
--altconfirm: linear-gradient(rgb(0, 100, 240),rgb(200, 200, 210))
}
button {
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #ccc;
border-radius: 125px;
box-shadow: inset 0 13px 25px rgba(255,255,255,0.5), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.1);
cursor: pointer;
font-family: 'Lucida Sans Unicode', Helvetica, Arial, sans-serif;
font-size: 1.5rem;
margin: 1rem 1rem;
padding: .8rem 2rem;
position: relative;
transition: all ease .3s;
}
button:hover {
box-shadow: inset 0 13px 25px rgba(255,255,255,.7), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.2);
transform: scale(1.001);
}
button::before {
background: linear-gradient(rgba(255,255,255,.8) 7%, rgba(255,255,255,0) 50%);
border-radius: 125px;
content:'';
height: 97.5%;
left: 5%;
position: absolute;
top: 1px;
transition: all ease .3s;
width: 90%;
}
button:active{
box-shadow: inset 0 13px 25px rgba(255, 255, 255, 0.2), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.2);
transform: scale(1);
}
button::before:active{
box-shadow: inset 0 13px 25px rgba(255, 255, 255, 0.01), 0 3px 5px rgba(0,0,0,0.418), 0 10px 13px rgba(0, 0, 0, 0.418);
transform: scale(1);
}
button.confirm {
background: linear-gradient(rgb(0, 36, 197),rgb(196, 201, 207));
animation-name: color;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-timing-function: ease;
}
button.cancel {
background: var(--cancel);
border: 1.7px solid #AAA;
color: #000;
}
And the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./Test.css">
</head>
<body>
<button class="confirm" style="background-color: linear-gradient(rgb(0, 36, 197),rgb(196, 201, 207))">Push Button</button><br>
<button class="cancel">Push Button</button><br>
<p>EEE</p>
</body>
</html>