¿Cómo consigo que la pantalla @media reduzca la escala de mi botón?

Tengo un botón que tiene un ancho de 300 px y un alto de 130 px. Quiero que el botón se reduzca con la página a medida que cambia el tamaño del navegador. Cuando agregué la pantalla @media e hice que el ancho máximo fuera de 375 px, aproximadamente el tamaño de la pantalla de un iPhone, el botón permaneció del mismo tamaño. ¿Alguien puede ayudar?

* {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  all: unset;
  display: inline-block;
  cursor: pointer;
  border-radius: 17px;
  z-index: 3;
  position: absolute;
  top: 51%;
}

#button {
  width: 300px;
  height: 130px;
  background-color: #58cc02;
  box-shadow: 0 10px 0 #58a700;
}

#button:active {
  box-shadow: none;
  transform: translateY(10px);
}

.stroke {
  z-index: 2;
  position: absolute;
  width: 300px;
  height: 130px;
  border-radius: 17px;
  outline: #58cc02 solid 3px;
  opacity: 0.5;
  animation: pulse 1.5s infinite alternate;
  top: 51%;
}

@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.1, 1.20);
  }
}

@media screen and (max-width:375px) {
  #button {
    width: 100px;
    height: 60px;
  }
}

<div class="parent">
  <button id="button"></button>

  <div class="stroke"></div>
</div>

Expandir fragmento

Feb 16 '24 00:02 Jen

Puede evitar toda esta molestia utilizando un pseudoelemento ( ::after) en lugar de un marcado adicional. Seguirá automáticamente el tamaño del botón. También puede establecer el tamaño del botón en un valor dinámico (vw, vh, %, rem) para que su tamaño sea infinitamente redimensionable en lugar de utilizar consultas de medios.

* {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

button {
  all: unset;
  display: inline-block;
  cursor: pointer;
  border-radius: 17px;
  z-index: 3;
  position: absolute;
  /* top: 51%; */
}

#button {
  width: 300px;
  height: 130px;
  background-color: #58cc02;
  box-shadow: 0 10px 0 #58a700;
}

#button:active {
  box-shadow: none;
  transform: translateY(10px);
}

#button::after {
  content: '';
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 17px;
  outline: #58cc02 solid 3px;
  opacity: 0.5;
  animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.1, 1.20);
  }
}

@media screen and (max-width:375px) {
  #button {
    width: 100px;
    height: 60px;
  }
}

<div class="parent">
  <button id="button"></button>
</div>

Expandir fragmento

Feb 15 '2024 17:02 isherwood

Al probar su código, el botón se hace más pequeño a <375 px, aunque el efecto de trazo aplicado a su div no lo hace.

Una solución rápida y sencilla sería agregar .stroke a su CSS dentro de la etiqueta media-screen.

* {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  all: unset;
  display: inline-block;
  cursor: pointer;
  border-radius: 17px;
  z-index: 3;
  position: absolute;
  top: 51%;
}

#button {
  width: 300px;
  height: 130px;
  background-color: #58cc02;
  box-shadow: 0 10px 0 #58a700;
}

#button:active {
  box-shadow: none;
  transform: translateY(10px);
}

.stroke {
  z-index: 2;
  position: absolute;
  width: 300px;
  height: 130px;
  border-radius: 17px;
  outline: #58cc02 solid 3px;
  opacity: 0.5;
  animation: pulse 1.5s infinite alternate;
  top: 51%;
}

@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.1, 1.20);
  }
}

@media screen and (max-width:375px) {
  #button,
  .stroke {
    width: 100px;
    height: 60px;
  }
}

<div class="parent">
  <button id="button"></button>

  <div class="stroke"></div>
</div>

Expandir fragmento

Feb 15 '2024 17:02 Scott