Gradient Border Button

Preview

A button whose background is transparent and only the border glows with a gradation. Pure CSS implementation that does not require JavaScript.

Use cases and features

• Clean Design: The background is completely transparent. A simple look that only the gradation of the border stands out and does not interfere with the content.

• Suitable for icons, toolbars, and glowing buttons: Suitable for control buttons placed on dark backgrounds, such as theater maps.

• No JavaScript required: Achieved with only animation and mask-composite. Minimal performance impact.

• Easy to expand variations: You can easily create buttons with different themes just by changing the color of linear-gradient.

Points of design and UX

1. How mask-composite: exclude works**: By setting padding: 2px on the ::before pseudo-element and inversely masking the content-box in that area, only the border can be displayed.

2. Directing the eye with animation: The rotating gradation flows on the border to naturally draw the eye to important buttons.

3. Scale up on hover: Express the anticipation of clicking with a subtle change in size of transform: scale(1.05).

How to customize

You can create variations by simply changing the color of the linear-gradient:

/* サンセット */

.gb-btn::before {

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

}



/* オーCyan */

.gb-btn::before {

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

}

To change the width of the border, change the value of padding:

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

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

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

Implementation code

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

Browser compatibility status

| Browser | Compatibility status |

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

| Chrome 80+ | ✅ Fully compatible |

| Firefox 99+ | ✅ Fully compatible |

| Safari 15.4+ | ✅ Compatible |

| Edge 80+ | ✅ Fully compatible |

Note: Older Safari requires -webkit-mask-composite: xor. As a fallback, border: 2px solid can be used in acceptable cases.