:root {
--success: #0c0;
}
button {
border: 2px solid;
border-radius: 10px;
cursor: pointer;
margin: 1em 0.5em;
padding: 10px 15px;
transition: transform 1s;
}
button:active {
transform: scale(90%);
}
button.animated {
background-color: transparent;
overflow: hidden;
position: relative;
transition: color 1s, border-color 1s, transform 0.2s;
z-index: 1;
}
button.animated:hover {
border-color: transparent;
}
button.animated::after {
border: 0;
border-radius: 50%;
content: "";
height: 150%;
left: -25%;
opacity: 0;
position: absolute;
top: -25%;
transform: scale(0.1);
transform-origin: center;
transition: all 1s;
width: 150%;
z-index: -1;
}
button.animated:hover::after {
opacity: 1;
transform: scale(1);
}
.text,
button.animated.background::after {
background-color: white;
}
.background,
button.animated.text:hover{
color: white;
}
button.animated.text {
border-color: var(--muted);
}
.success.text,
button.animated.success.background:hover {
color: var(--success);
}
.success.background,
button.animated.success.text::after {
background-color: var(--success);
}
button.animated.success.text:hover,
button.animated.success.background {
border-color: var(--success);
}
<button class="animated success background">Button</button>
<button class="animated success background">Longer button</button>
O botão no snippet acima tem um efeito de fundo em forma de elipse que aparece quando você passa o mouse sobre ele. Atualmente, as dimensões da elipse são proporcionais às dimensões do botão. Gostaria que a elipse fosse circular, com largura 141,4% maior que a dimensão maior do botão ou, se não for possível, a largura do botão. Como posso fazer isso?