# Gradient border (B 026)

Category: Buttons  
Tags: gradient, outline, border-gradient, mask  
Page: https://designforai.dev/snippet/btn-026

## Prompt

A white button with a 2px gradient border (135deg rose #f43f5e to violet #8b5cf6 to blue #3b82f6) made with a masked pseudo-element so the inside stays white. Text #111827 at 14px semibold, 10px radius, 12px by 24px padding. Hover turns the text violet; active tints the background #faf5ff. Focus outline 2px violet.

## HTML

```html
<button class="btn-026">Upgrade</button>
```

## CSS

```css
.btn-026 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  color: #111827;
  background: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px 24px;
  cursor: pointer;
  isolation: isolate;
  transition: color .2s
}
.btn-026::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg,#f43f5e,#8b5cf6,#3b82f6);
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1
}
.btn-026:hover {
  color: #8b5cf6
}
.btn-026:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 3px
}
.btn-026:active {
  background: #faf5ff
}
```