i’ve been designing a button, then you press, then appears an ::after with content “copied!”
Ok, while ::after appears there is an animation, that animation triggers with :active property, but when i stop pressing the animation ends brutally, interrupts. doesnt end properly
how can i stop pressing and the animation ends properly?
here my code!
* {
font-family: monospace;
}
table{
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 2px dashed black;
}
td, th{
padding: 5px;
border: 2px dashed black;
text-align: center;
}
tr td:nth-child(4) span {
cursor: pointer;
background: #95c1e3;
color: white;
padding: 12px;
border-radius: 50px;
font-weight: bolder;
font-size: 17px;
}
tr td:nth-child(4) span:active::after {
display: block;
position: absolute;
width: 100px;
height: max-content;
padding: 10px 0px 10px 0px;
background: black;
border-radius: 50px;
animation: copied 1s;
content: "copiado!";
opacity: 0;
}
@keyframes copied {
0%{
margin-top: 0;
opacity: 1;
}
100%{
margin-top: 15px;
opacity: 0;
}
}<table>
<thead>
<tr>
<th>Server</th>
<th>Nombre</th>
<th>Jugadores</th>
<th>IP</th>
</tr>
</thead>
<tbody id="tabla">
<tr>
<td></td>
<td>Sin nombre</td>
<td>1399 / 5000</td>
<td><span onclick="onclicker()">hub.mc-complex.com</span></td>
</tr>
<tr>
<td></td>
<td> ! SuperCraft Network [1.8-1.21] ❤ !
Amigos en: discord.supercraft.es
</td>
<td>333 / 2000</td>
<td><span onclick="onclicker()">supercraft.es</span></td>
</tr>
<tr>
<td></td>
<td> 1.8-1.21
NUEVO > 15 REGALOS DE NAVIDAD
</td>
<td>189 / 1000</td>
<td><span onclick="onclicker()">play.zonecraft.es</span></td>
</tr>
<tr>
<td></td>
<td> ! UniversoCraft Network [1.8-1.21] ❤ !
Chatea en: discord.universocraft.com
</td>
<td>5427 / 20000</td>
<td><span onclick="onclicker()">mc.universocraft.com</span></td>
</tr>
</tbody>
</table>
New contributor
Jesús Fernández is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
As @A Haworth mentioned, you could consider using JavaScript to play the animation.
Here, we use a copy class to show the ::after element and then remove the class one frame later. This then plays the transition, which is independent of wether the :active pseudo class matches. This means there is no abrupt end.
document.body.addEventListener('click', ({ target }) => {
if (target.matches('span[onclick="onclicker()"]')) {
// Add the copy class to show the `::after`.
target.classList.add('copy');
// Go through two animation frames to ensure we are on the next frame.
requestAnimationFrame(() => {
requestAnimationFrame(() => {
// Remove the copy class to hide the `::after`.
target.classList.remove('copy');
});
});
}
});
window.onclicker = () => {};* {
font-family: monospace;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 2px dashed black;
}
td,
th {
padding: 5px;
border: 2px dashed black;
text-align: center;
}
tr td:nth-child(4) span {
cursor: pointer;
background: #95c1e3;
color: white;
padding: 12px;
border-radius: 50px;
font-weight: bolder;
font-size: 17px;
}
tr td:nth-child(4) span::after {
display: block;
position: absolute;
width: 100px;
height: max-content;
padding: 10px 0px 10px 0px;
background: black;
border-radius: 50px;
content: "copiado!";
opacity: 0;
translate: 0 15px;
transition: translate 1s, opacity 1s;
}
tr td:nth-child(4) span.copy::after {
opacity: 1;
translate: 0 0;
transition: 0s;
}<table>
<thead>
<tr>
<th>Server</th>
<th>Nombre</th>
<th>Jugadores</th>
<th>IP</th>
</tr>
</thead>
<tbody id="tabla">
<tr>
<td></td>
<td>Sin nombre</td>
<td>1399 / 5000</td>
<td><span onclick="onclicker()">hub.mc-complex.com</span></td>
</tr>
<tr>
<td></td>
<td>! SuperCraft Network [1.8-1.21] ❤ ! Amigos en: discord.supercraft.es</td>
<td>333 / 2000</td>
<td><span onclick="onclicker()">supercraft.es</span></td>
</tr>
<tr>
<td></td>
<td>1.8-1.21 NUEVO > 15 REGALOS DE NAVIDAD</td>
<td>189 / 1000</td>
<td><span onclick="onclicker()">play.zonecraft.es</span></td>
</tr>
<tr>
<td></td>
<td>! UniversoCraft Network [1.8-1.21] ❤ ! Chatea en: discord.universocraft.com</td>
<td>5427 / 20000</td>
<td><span onclick="onclicker()">mc.universocraft.com</span></td>
</tr>
</tbody>
</table>An alternative JavaScript solution could be to use the Web Animations API:
document.body.addEventListener('click', ({ target }) => {
if (target.matches('span[onclick="onclicker()"]')) {
const keyframes = [
{
opacity: 1,
translate: '0 0',
},
{
opacity: 0,
translate: '0 15px',
},
];
const options = {
duration: 1000,
timing: 'cubic-bezier(0.32, 0, 0.67, 0)',
pseudoElement: '::after',
};
target.animate(keyframes, options);
}
});
window.onclicker = () => {};* {
font-family: monospace;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 2px dashed black;
}
td,
th {
padding: 5px;
border: 2px dashed black;
text-align: center;
}
tr td:nth-child(4) span {
cursor: pointer;
background: #95c1e3;
color: white;
padding: 12px;
border-radius: 50px;
font-weight: bolder;
font-size: 17px;
}
tr td:nth-child(4) span::after {
display: block;
position: absolute;
width: 100px;
height: max-content;
padding: 10px 0px 10px 0px;
background: black;
border-radius: 50px;
content: "copiado!";
opacity: 0;
translate: 0 15px;
}<table>
<thead>
<tr>
<th>Server</th>
<th>Nombre</th>
<th>Jugadores</th>
<th>IP</th>
</tr>
</thead>
<tbody id="tabla">
<tr>
<td></td>
<td>Sin nombre</td>
<td>1399 / 5000</td>
<td><span onclick="onclicker()">hub.mc-complex.com</span></td>
</tr>
<tr>
<td></td>
<td>! SuperCraft Network [1.8-1.21] ❤ ! Amigos en: discord.supercraft.es</td>
<td>333 / 2000</td>
<td><span onclick="onclicker()">supercraft.es</span></td>
</tr>
<tr>
<td></td>
<td>1.8-1.21 NUEVO > 15 REGALOS DE NAVIDAD</td>
<td>189 / 1000</td>
<td><span onclick="onclicker()">play.zonecraft.es</span></td>
</tr>
<tr>
<td></td>
<td>! UniversoCraft Network [1.8-1.21] ❤ ! Chatea en: discord.universocraft.com</td>
<td>5427 / 20000</td>
<td><span onclick="onclicker()">mc.universocraft.com</span></td>
</tr>
</tbody>
</table>For a CSS-only alternative, you could have the element be shown while :active matches and then have it fade out when it longer does:
document.body.addEventListener('click', ({ target }) => {
if (target.matches('span[onclick="onclicker()"]')) {
// Add the copy class to show the `::after`.
target.classList.add('copy');
// Go through two animation frames to ensure we are on the next frame.
requestAnimationFrame(() => {
requestAnimationFrame(() => {
// Remove the copy class to hide the `::after`.
target.classList.remove('copy');
});
});
}
});
window.onclicker = () => {};* {
font-family: monospace;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 2px dashed black;
}
td,
th {
padding: 5px;
border: 2px dashed black;
text-align: center;
}
tr td:nth-child(4) span {
cursor: pointer;
background: #95c1e3;
color: white;
padding: 12px;
border-radius: 50px;
font-weight: bolder;
font-size: 17px;
}
tr td:nth-child(4) span::after {
display: block;
position: absolute;
width: 100px;
height: max-content;
padding: 10px 0px 10px 0px;
background: black;
border-radius: 50px;
content: "copiado!";
opacity: 0;
translate: 0 15px;
transition: translate 1s, opacity 1s;
}
tr td:nth-child(4) span:active::after {
opacity: 1;
translate: 0 0;
transition: 0s;
}<table>
<thead>
<tr>
<th>Server</th>
<th>Nombre</th>
<th>Jugadores</th>
<th>IP</th>
</tr>
</thead>
<tbody id="tabla">
<tr>
<td></td>
<td>Sin nombre</td>
<td>1399 / 5000</td>
<td><span onclick="onclicker()">hub.mc-complex.com</span></td>
</tr>
<tr>
<td></td>
<td>! SuperCraft Network [1.8-1.21] ❤ ! Amigos en: discord.supercraft.es</td>
<td>333 / 2000</td>
<td><span onclick="onclicker()">supercraft.es</span></td>
</tr>
<tr>
<td></td>
<td>1.8-1.21 NUEVO > 15 REGALOS DE NAVIDAD</td>
<td>189 / 1000</td>
<td><span onclick="onclicker()">play.zonecraft.es</span></td>
</tr>
<tr>
<td></td>
<td>! UniversoCraft Network [1.8-1.21] ❤ ! Chatea en: discord.universocraft.com</td>
<td>5427 / 20000</td>
<td><span onclick="onclicker()">mc.universocraft.com</span></td>
</tr>
</tbody>
</table>1
If you need a clickable element use <button>. <span> should be the last choice of elements, it’s made to format text with no semantics. Plus a <button> is focusable so when the user clicks on it, it stays in that state until the user clicks elsewhere. So in addition to the :active state, those styles should apply to the :focus state as well.
button:active::after,
button:focus::after {
...
}
* {
font-family: Consolas;
}
table {
border-collapse: collapse;
border: 2px dashed black;
}
td,
th {
padding: 5px;
border: 2px dashed black;
text-align: center;
}
div {
min-width: max-content;
}
button {
position: relative;
display: block;
width: 100%;
padding: 12px;
border-radius: 50px;
font-weight: bolder;
font-size: 17px;
background: #95c1e3;
}
button:hover {
border-color: #95c1e3;
color: white;
background: black;
cursor: pointer;
}
button:active::after,
button:focus::after {
content: "copiado!";
position: absolute;
bottom: calc(75% - 15.2px);
left: 20%;
z-index: 1;
display: inline-block;
padding: 10px;
border-radius: 50px;
background: black;
opacity: 0;
animation: copied 1.3s ease-in;
}
@keyframes copied {
0% {
translate: 50% 75%;
opacity: 1;
}
100% {
translate: 0;
opacity: 0;
}
}<table>
<thead>
<tr>
<th>Server</th>
<th>Nombre</th>
<th>Jugadores</th>
<th>IP</th>
</tr>
</thead>
<tbody id="tabla">
<tr>
<td></td>
<td>
<div>Sin</div>
<div>Nombre</div>
</td>
<td>
<div>1399 / 5000</div>
</td>
<td>
<button>hub.mc-complex.com</button>
</td>
</tr>
<tr>
<td></td>
<td>
<div>! SuperCraft Network [1.8-1.21] ❤ !</div>
<div>Amigos en: discord.supercraft.es</div>
</td>
<td>
<div>333 / 2000</div>
</td>
<td>
<button>supercraft.es</button>
</td>
</tr>
<tr>
<td></td>
<td>
<div>1.8-1.21
NUEVO > 15</div>
<div>REGALOS DE NAVIDAD</div>
</td>
<td>
<div>189 / 1000</div>
</td>
<td>
<button>play.zonecraft.es</button>
</td>
</tr>
<tr>
<td></td>
<td>
<div>! UniversoCraft Network [1.8-1.21] ❤ !</div>
<div>Chatea en: discord.universocraft.com</div>
</td>
<td>
<div>5427 / 20000</div>
</td>
<td>
<button>mc.universocraft.com</button>
</td>
</tr>
</tbody>
</table>