Início / coding / Perguntas / 79597275
Accepted
Eric Wang
Asked: 2025-04-29 04:52:15 +0800 CST

Defina ambas as dimensões do elemento com base em uma dimensão pai

  • 772

: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?

html

2 respostas

  1. Aqui está uma ideia usando fundo e gradientes

    button {
  border: 2px solid red;
  border-radius: 10px;
  cursor: pointer;
  margin: 1em 0.5em;
  padding: 10px 15px;
  background:
   radial-gradient(circle closest-side,#fff 98%,#0000) 
    50% padding-box no-repeat red;
  background-size: var(--s,0%) 999px; /* the second value is a very big value */
  transition: .5s;
}
button:hover {
  --s: 110%; /* you can use 100% but a bit bigger is better */
}
    <button>Button</button>
<button>Longer button</button>

    • 1
  2. Best Answer

    :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 {
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 50%;
    content: "";
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    transform-origin: center;
    transition: all 1s;
    width: 142%;
    z-index: -1;
}

button.animated:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) 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>

    Resolvi! Adicionei aspect-ratio: 1 / 1;, configurei apenas a largura para 142% e simplesmente usei left: 50%;, top: 50%;, e transform: translate(-50%, -50%)para mover o fundo para o centro do botão. Adicionei transform: translate(-50%, -50%)também :hover::after, para que o círculo permaneça centralizado quando o botão for passado.

    • 1

relate perguntas