Animated Rainbow Button với HTML và CSS

Chia sẻ

---

1. HTML

<a href="#" class="rainbow-button" alt="Button"></a>

2. CSS

body {
			margin: 0;
			background-color: #191919;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Helvetica, Sans-serif;
		}
		a {
			text-decoration: none;
			color: #fff;
		}
		.rainbow-button {
			width: calc(20vw + 6px);
			height: calc(8vw + 6px);
			background-image: linear-gradient(
				90deg,
				#00c0ff 0%,
				#ffcf00 49%,
				#fc4f4f 80%,
				#00c0ff 100%
				);
			border-radius: 5px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-transform: uppercase;
			font-size: 3vw;
			font-weight: bold;
		}
		.rainbow-button:after {
			content: attr(alt);
			width: 20vw;
			height: 8vw;
			background-color: #191919;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.rainbow-button:hover {
			animation: slidebg 0.8s linear infinite;
		}

		@keyframes slidebg {
			to {
				background-position: 20vw;
			}
		}

3. JAVASCRIPT

---