Quiero darle a mis botones de arranque un efecto de brillo. Sé que puedo usar box-shadow para esto, pero dado que requiere un color especificado, esperaba que hubiera alguna forma de heredarlo del botón en sí, para que cada botón diferente (éxito, primario, advertencia, etc.) brillara con su respectivo color. Por ejemplo, así es como se vería para btn-primary, pero me gustaría hacer que el color se herede dinámicamente:

.glow-button {
  box-shadow: 0 0 30px #007bff;
}

.btn-lg {
  margin: 1em;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-block btn-lg glow-button btn-primary">Primary</button>
0
UnionP 25 jun. 2020 a las 20:17

2 respuestas

Un pseudo elemento donde aplique el filtro puede hacer esto confiando en heredar el color de fondo:

.glow-button {
  position:relative;
}
.glow-button::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  filter:blur(15px);
  transition:0.5s;
}

.glow-button:focus::before {
   filter:blur(1px);
}

.btn-lg {
  margin: 1em;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="form-group">

        <button type="button" class="btn btn-block btn-lg glow-button btn-primary">Primary</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-secondary">Secondary</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-success">Success</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-danger">Danger</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-warning">Warning</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-info">Info</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-light">Light</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-dark">Dark</button>

      </div>
    </div>
  </div>
</div>
0
Temani Afif 25 jun. 2020 a las 19:31

Esto es lo que finalmente se me ocurrió. Si alguien tiene una manera de hacerlo sin especificar manualmente el color para cada tipo de botón, ¡me encantaría escucharlo!

.glow-button {
  --box-shadow-color: black;
  box-shadow: 0 0 30px var(--box-shadow-color);
}

.btn-primary.glow-button {
  --box-shadow-color: #007bff;
}

.btn-secondary.glow-button {
  --box-shadow-color: #6c757d;
}

.btn-success.glow-button {
  --box-shadow-color: #28a745;
}

.btn-danger.glow-button {
  --box-shadow-color: #dc3545;
}

.btn-warning.glow-button {
  --box-shadow-color: #ffc107;
}

.btn-info.glow-button {
  --box-shadow-color: #17a2b8;
}

.btn-danger.glow-button {
  --box-shadow-color: #dc3545;
}

.btn-light.glow-button {
  --box-shadow-color: #f8f9fa;
}

.btn-dark.glow-button {
  --box-shadow-color: #343a40;
}

.btn-lg {
  margin: 1em;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="form-group">

        <button type="button" class="btn btn-block btn-lg glow-button btn-primary">Primary</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-secondary">Secondary</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-success">Success</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-danger">Danger</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-warning">Warning</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-info">Info</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-light">Light</button>
        <button type="button" class="btn btn-block btn-lg glow-button btn-dark">Dark</button>

      </div>
    </div>
  </div>
</div>
0
UnionP 25 jun. 2020 a las 17:17