<button>
	<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentcolor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
	<span>Search</span>
</button>
@keyframes mixin-button {
	from, to {
		appearance: none;
		font: inherit;
		background-color: blue;
		color: white;
		display: inline-flex;
		align-items: center;
		gap: 1ch;
		border: 1px solid transparent;
		padding: .5em .75em;
		border-radius: 4px;
		font-size: 1.2em;
		font-weight: bolder;
		text-transform: uppercase;
		letter-spacing: 1px;
		cursor: pointer;
	}
}

@property --mixin-button {
  syntax: "*";
  inherits: false;
  initial-value: mixin-button 0.001ms forwards;
}

button {
	animation: var(--mixin-button);
}

body {
	font-family: sans-serif;
}

svg {
	height: 1cap;
	aspect-ratio: 1;
	scale: 2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.