Soy demasiado tonto para obtener el mismo efecto del botón blanco en el oscuro. ¿Podría explicarme el proceso de pensamiento para obtener el efecto en cualquier color de fondo? Idealmente, me gustaría obtener un efecto dominó de color blanquecino o grisáceo que funcione en todos los fondos. Créditos al original https://codepen.io/finnhvman/pen/jLXKJw
/* Button style */ .btn-light { border: none; border-radius: 2px; padding: 12px 18px; font-size: 16px; text-transform: uppercase; cursor: pointer; color: black; background-color: white; box-shadow: 0 0 4px #999; outline: none; } .btn-dark{ border: none; border-radius: 2px; padding: 12px 18px; font-size: 16px; text-transform: uppercase; cursor: pointer; color: white; background-color: black; box-shadow: 0 0 4px #999; outline: none; } /* Ripple effect */ .ripple { background-position: center; transition: background 0.8s; } .ripple-light:hover { background: transparent radial-gradient(circle, transparent 1%, white 1%) center/15000%; } .ripple-light:active { background-color: grey; background-size: 100%; transition: background 0s; } .ripple-dark:hover { background: transparent radial-gradient(circle, transparent 1%, dark 1%) center/15000%; } .ripple-dark:active { background-color: grey; background-size: 100%; transition: background 0s; } <button class="btn-light ripple ripple-light">Button</button> <button class="btn-dark ripple ripple-dark">Button</button>Use la variable CSS para definir los colores:
/* Button style */ .btn { border: none; border-radius: 2px; padding: 12px 18px; font-size: 16px; text-transform: uppercase; cursor: pointer; color: black; background-color: var(--c); box-shadow: 0 0 4px #999; outline: none; } .light { --c: #fff; color:#000; } .dark { --c: #000; color:#fff; } /* Ripple effect */ .ripple { background-position: center; transition: background 0.8s; } .ripple:hover { background: var(--c) radial-gradient(circle, #0000 1%, var(--c) 1%) center/15000% ; } .ripple:active { background-color: grey; background-size: 100%; transition: background 0s; } <button class="btn light ripple">Button</button> <button class="btn dark ripple">Button</button>