SnippetUI
← Back to snippets

Botón con Borde Degradado

Este componente de botón tiene un hermoso borde degradado giratorio al combinar CSS `-webkit-mask-composite` y degradado animado.

HTMLCSS

Vista previa

Un botón cuyo fondo es transparente y sólo el borde brilla con una gradación. Implementación de CSS puro que no requiere JavaScript.

Casos de uso y características

  • Diseño Limpio: El fondo es completamente transparente. Una apariencia sencilla en la que solo destaca la gradación del borde y no interfiere con el contenido.

  • Adecuado para iconos, barras de herramientas y botones brillantes: Adecuado para botones de control colocados sobre fondos oscuros, como mapas de cine.

  • No se requiere JavaScript: se logra solo con animación y máscara compuesta. Impacto mínimo en el rendimiento.

  • Variaciones fáciles de ampliar: puedes crear fácilmente botones con diferentes temas simplemente cambiando el color de “degradado lineal”.

Puntos de diseño y UX

  1. Cómo funciona mask-composite: excluir**: Al configurar padding: 2px en el pseudoelemento ::before y enmascarar inversamente el cuadro de contenido en esa área, solo se puede mostrar el borde.

  2. Dirigir la vista con animación: la gradación giratoria fluye en el borde para atraer la atención de forma natural hacia los botones importantes.

  3. Aumentar escala al pasar el mouse: expresa la anticipación de hacer clic con un cambio sutil en el tamaño de transformar: escala(1.05).

Cómo personalizar

Puedes crear variaciones simplemente cambiando el color del “gradiente lineal”:


/* サンセット */

.gb-btn::before {

  background: linear-gradient(45deg, #f97316, #ef4444, #f59e0b);

}



/* オーcian */

.gb-btn::before {

  background: linear-gradient(45deg, #06b6d4, #3b82f6, #8b5cf6);

}

Para cambiar el ancho del borde, cambie el valor de “relleno”:


/* 幅を広く (3px) */

.gb-btn::before { padding: 3px; }

.gb-btn::after { inset: 3px; }

Código de implementación

<button class="gb-btn">Primary</button>

<button class="gb-btn gb-btn-success">Success</button>

<button class="gb-btn gb-btn-warning">Warning</button>



<style>
.gb-btn {

position: relative;

background: transparent;

border: none;

padding: 14px 36px;

font-size: 1rem;

font-weight: 600;

letter-spacing: 0.08em;

cursor: pointer;

border-radius: 8px;

color: white;

z-index: 1;

transition: transform 0.2s ease, box-shadow 0.3s ease;

}

.gb-btn::before {

content: '';

position: absolute;

inset: 0;

padding: 2px;

border-radius: 8px;

background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe);

background-size: 400% 400%;

-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;

mask-composite: exclude;

animation: gb-rotate 3s ease infinite;

}

.gb-btn::after {

content: '';

position: absolute;

inset: 2px;

border-radius: 6px;

background: rgba(17,24,39,0.9);

z-index: -1;

}

.gb-btn:hover { transform: scale(1.05); }

.gb-btn-success::before { background: linear-gradient(45deg, #43e97b, #38f9d7); }

.gb-btn-warning::before { background: linear-gradient(45deg, #f7971e, #ffd200); }

@keyframes gb-rotate {

0%, 100% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

}
</style>

Estado de compatibilidad del navegador

| Navegador | Estado de compatibilidad |

|--------|-------|

| Cromo 80+ | ✅ Totalmente compatible |

| Firefox 99+ | ✅ Totalmente compatible |

| Safari 15.4+ | ✅Compatibles |

| Borde 80+ | ✅ Totalmente compatible |

Nota: Safari anterior requiere -webkit-mask-composite: xor. Como alternativa, se puede utilizar “borde: 2px sólido” en casos aceptables.