- let cols = [
- '#26e0ec, #bf4fd9',
- '#ffda5f, #f9376b',
- '#feb6b7, #6148c0',
- '#00ecac, #3b5fe9',
- '#fe3ea3, #6c41ac'
- ];
- let btns = {
- 'comments': '🗨️',
- 'settings': '⚙️',
- 'profile': '👱',
- 'search': '🔍',
- 'like': '🖤',
- 'delete': '🗑️',
- 'purchase': '🛒',
- 'ok': '✔️',
- 'cancel': '❌',
- 'attach': '📎',
- 'favourites': '⭐',
- 'location': '📍',
- 'book now': '👆',
- 'registration': '✏️',
- 'learn more': '❯',
- 'login': '🔒',
- 'subscribe': '🔔',
- 'home': '🏠',
- 'microphone': '🎙️',
- 'play now': 'ᐅ'
- };
- let m = cols.length;
- let opts = [
- 'Simple Chrome-only (non-standard) solution',
- 'Extra pseudo cross-browser solution',
- 'No pill rounding solution'
- ];
- let n = opts.length;
- for(let i = 0; i < n; i++)
section
h3 #{opts[i]}
- for(let p in btns)
- let idx = ~~(Math.random()*m)
button(data-ico=btns[p] style=`--slist: ${cols[idx]}`) #{p}
View Compiled
$b: .25em;
* { margin: 0; padding: 0; font: inherit }
body, section, button { display: grid }
body {
grid-gap: 3em;
margin: 0;
height: 100vh;
background:
repeating-linear-gradient(45deg,
#000 0 1em, #111 0 2em);
font: 900 .75em ubuntu, sans-serif
}
section {
grid-gap: 2em .75em;
grid-template-columns: repeat(auto-fit, 12em);
place-content: center;
}
h3 {
grid-column: 1/ -1;
color: #eee;
font: 2rem/ 1.25em z003, segoe scrpt, comic sans ms, cursive;
text-align: center;
}
button {
--full: linear-gradient(red 0 0);
--grad: linear-gradient(to right bottom, var(--slist));
grid-gap: .5em;
grid-auto-flow: column;
place-self: center;
border: solid $b transparent;
padding: 1em 1.5em;
border-radius: 9em;
background: var(--grad) border-box;
-webkit-text-fill-color: transparent;
font: inherit;
text-transform: uppercase;
:nth-child(1) > & {
mask: var(--full), var(--full), var(--full);
-webkit-mask-clip: text, padding-box, border-box;
mask-composite: exclude
}
:nth-child(2) > & {
position: relative;
background-clip: text;
&::before {
position: absolute;
inset: -$b;
border: inherit;
border-radius: inherit;
background: inherit;
background-clip: border-box;
mask: var(--full) padding-box exclude,
var(--full);
content: ''
}
}
:nth-child(3) > & {
border-image: var(--grad) 1;
background-clip: text;
clip-path: inset(0 round $b)
}
&::after { content: attr(data-ico) }
}
View Compiled