- 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
/*
Exeplained in my CSS-ing Candy Ghost Buttons https://css-tricks.com/css-ing-candy-ghost-buttons/ article on CSS-Tricks - check it out for details!
*/
View Compiled

External CSS

  1. https://codepen.io/thebabydino/pen/evPbxv.scss

External JavaScript

  1. https://codepen.io/thebabydino/pen/evPbxv.js