Componentes de botones CSS

<!--
	stylify-variables
		color: '#37b7f7'
	/stylify-variables
-->
<button class="display:inline-flex align-items:center padding:12px_24px border-radius:24px white-space:nowrap line-height:24px border:none font-weight:700 letter-spacing:0.1px outline:none cursor:pointer font-size:16px color:#fff user-select:none text-decoration:none background:$color transition:background_0.3s hover:background:lighten($color,20) focus:background:lighten($color,20)">Button</button>
<a href="#" class="display:inline-flex align-items:center padding:12px_24px border-radius:24px white-space:nowrap line-height:24px border:none font-weight:700 letter-spacing:0.1px outline:none cursor:pointer font-size:16px color:#fff user-select:none text-decoration:none background:$color transition:background_0.3s hover:background:lighten($color,20) focus:background:lighten($color,20)">Anchor button</a>
<input type="submit" value="Input button" class="display:inline-flex align-items:center padding:12px_24px border-radius:24px white-space:nowrap line-height:24px border:none font-weight:700 letter-spacing:0.1px outline:none cursor:pointer font-size:16px color:#fff user-select:none text-decoration:none background:$color transition:background_0.3s hover:background:lighten($color,20) focus:background:lighten($color,20)">

<button class="display:inline-flex align-items:center padding:12px_24px border-radius:24px white-space:nowrap line-height:24px border:none font-weight:700 letter-spacing:0.1px outline:none cursor:pointer font-size:16px color:#fff user-select:none text-decoration:none background:$color transition:background_0.3s hover:background:lighten($color,20) focus:background:lighten($color,20)">
	<span class="display:inline-flex width:20px min-width:20px font-size:24px margin-right:4px justify-content:center align-items:center">&plus;</span>
	<span>With icon</span>
</button>

<br>

<button class="display:inline-flex align-items:center padding:12px_24px border-radius:24px white-space:nowrap line-height:24px border:none font-weight:700 letter-spacing:0.1px outline:none cursor:pointer font-size:16px color:$color user-select:none text-decoration:none background:#fff transition:background_0.3s border:1px_solid_#79747e hover:background:colorToRgb($color,0.10) focus:background:colorToRgb($color,0.10)">Outline</button>
<button class="display:inline-flex align-items:center padding:12px_24px border-radius:24px white-space:nowrap line-height:24px border:none font-weight:700 letter-spacing:0.1px outline:none cursor:default font-size:16px user-select:none text-decoration:none border:1px_solid_#e4e0e3 background:#fff color:#aaa7ab ">Outline disabled</button>
<button class="display:inline-flex align-items:center padding:12px_24px border-radius:24px white-space:nowrap line-height:24px border:none font-weight:700 letter-spacing:0.1px outline:none cursor:default font-size:16px user-select:none text-decoration:none background:#e3dfe3 color:#aaa7ab">Solid disabled</button>

<br>

<button class="display:inline-flex align-items:center padding:12px_24px border-radius:24px white-space:nowrap line-height:24px border:none font-weight:700 letter-spacing:0.1px outline:none cursor:pointer font-size:16px color:$color user-select:none text-decoration:none background:none transition:background_0.3s hover:background:colorToRgb($color,0.10) focus:background:colorToRgb($color,0.10)">Text button</button>
<button class="display:inline-flex align-items:center padding:12px_24px border-radius:24px white-space:nowrap line-height:24px border:none font-weight:700 letter-spacing:0.1px outline:none font-size:16px user-select:none text-decoration:none background:none color:#aaa7ab">Text button disabled</button>

<!--
stylify-variables
	color: '#6750A4'
/stylify-variables

stylify-components
	button: `
		display:inline-flex align-items:center padding:12px_24px border-radius:24px white-space:nowrap line-height:24px border:none font-weight:700 letter-spacing:0.1px outline:none cursor:pointer line-height:20px font-size:16px color:$color user-select:none text-decoration:none background:none transition:background_0.3s hover:background:colorToRgb($color,0.10) focus:background:colorToRgb($color,0.10)
		&.button--solid {
			background:$color color:#fff hover:background:lighten($color,20) focus:background:lighten($color,20)
			&.button--disabled { cursor:default background:#e3dfe3 color:#aaa7ab }
		}
		&.button--outline {
			color:$color background:#fff border:1px_solid_#79747e hover:background:colorToRgb($color,0.10) focus:background:colorToRgb($color,0.10)
			&.button--disabled { cursor:default border:1px_solid_#e4e0e3 background:#fff color:#aaa7ab }
		}
		&.button--disabled { cursor:default background:none color:#aaa7ab }
		&__icon { display:inline-flex width:20px min-width:20px font-size:24px margin-right:4px line-height:20px justify-content:center align-items:center }
	`
/stylify-components
-->
<button class="button button--solid">Button</button>
<a href="#" class="button button--solid button--secondary">Anchor button</a>
<input type="submit" class="button button--solid button--tertiary" value="Input button">

<br><br>

<button class="button button--solid">
	<span class="button__icon">&plus;</span>
	<span>With icon</span>
</button>
<button class="button button--outline">Outline</button>
<button class="button button--outline button--disabled">Outline disabled</button>
<button class="button button--solid button--disabled">Solid disabled</button>

<br><br>

<p class="display:inline-flex gap:24px">
<button class="button">Text button</button>
<button class="button button--disabled">Text button disabled</button>

Scroll down to see the button

<!--
stylify-variables
	color: '#2666eb',
/stylify-variables
-->
<a role="button" id="scroll-to-top-button" class="
	position:fixed bottom:0 right:24px text-decoration:none font-size:42px transform:translateY(100px) width:50px height:50px
	display:inline-flex align-items:center justify-content:center border-radius:50px font-weight:700 cursor:pointer font-size:42px color:#fff user-select:none text-decoration:none background:$color transition:.3s
	box-shadow:0_4px_8px_rgba(0,0,0,0.16),0_4px_8px_rgba(0,0,0,0.23) will-change:transform,background-color

	[&:hover,&:focus]{background:lighten($color,20)}
	[&.s-visible]{transform:translateY(-24px)}
">
	<!-- Replace this icon by whatever you want -->
	<svg height="30px" width="30px" viewBox="0 0 185.343 185.343" xml:space="preserve" transform="rotate(270)">
		<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
		<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
		<g id="SVGRepo_iconCarrier">
			<g><g><path style="fill:#ffffff;" d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175 l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934 c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"></path></g></g>
		</g>
	</svg>
</a>

<script type="text/javascript">
	// Adjust this to your needs
	// It can be for example a height of page header
	const minScrollTop = 50;
	const scrollToTopButton = document.querySelector('#scroll-to-top-button');
	scrollToTopButton.addEventListener('click', () => {
		window.scrollTo(0, 0);
	});

	const toggleScrollToTopButton = () => {
		let scrollTopPosition = document.documentElement.scrollTop;

		if (scrollTopPosition > minScrollTop) {
			scrollToTopButton.classList.add('s-visible');
		} else {
			scrollToTopButton.classList.remove('s-visible');
		}
	}

	document.addEventListener('scroll', toggleScrollToTopButton, { passive: true });
	document.addEventListener("DOMContentLoaded", toggleScrollToTopButton);
</script>

Scroll down to see the button

<!--
stylify-components
	'scroll-to-top-button': `
		position:fixed bottom:0 right:24px text-decoration:none font-size:42px transform:translateY(100px) width:50px height:50px
		display:inline-flex align-items:center justify-content:center border-radius:50px font-weight:700 cursor:pointer font-size:42px color:#fff user-select:none text-decoration:none background:$color transition:.3s
		box-shadow:0_4px_8px_rgba(0,0,0,0.16),0_4px_8px_rgba(0,0,0,0.23) will-change:transform,background-color

		&:hover,&:focus { background:lighten($color,20) }

		&.s-visible { transform:translateY(-24px) }
	`
/stylify-components

stylify-variables
	color: '#6750A4',
/stylify-variables
-->
<a role="button" id="scroll-to-top-button" class="scroll-to-top-button">
	<svg height="30px" width="30px" viewBox="0 0 185.343 185.343" xml:space="preserve" transform="rotate(270)">
		<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
		<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
		<g id="SVGRepo_iconCarrier">
			<g><g><path style="fill:#ffffff;" d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175 l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934 c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"></path></g></g>
		</g>
	</svg>
</a>

<script type="text/javascript">
// Adjust this to your needs
// It can be for example a height of page header
const minScrollTop = 50;
const scrollToTopButton = document.querySelector('#scroll-to-top-button');
scrollToTopButton.addEventListener('click', () => {
	window.scrollTo(0, 0);
});

const toggleScrollToTopButton = () => {
	let scrollTopPosition = document.documentElement.scrollTop;

	if (scrollTopPosition > minScrollTop) {
		scrollToTopButton.classList.add('s-visible');
	} else {
		scrollToTopButton.classList.remove('s-visible');
	}
}

document.addEventListener('scroll', toggleScrollToTopButton, { passive: true });
document.addEventListener("DOMContentLoaded", toggleScrollToTopButton);
</script>