Skip to content

Instantly share code, notes, and snippets.

@gmcusaro
Created April 2, 2022 19:57
Show Gist options
  • Save gmcusaro/f2e8bda066c58385ea047ff1cd853a44 to your computer and use it in GitHub Desktop.
Save gmcusaro/f2e8bda066c58385ea047ff1cd853a44 to your computer and use it in GitHub Desktop.
Rainbow button
html, body {
height: 100%;
overflow: hidden;
}
body {
background: #191919;
display: flex;
align-items: center;
justify-content: center;
}
.button {
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);
position: relative;
padding: 3px;
display: inline-block;
border-radius: 17px;
}
.button span {
display: inline-block;
background: #191919;
color: white;
text-transform: uppercase;
padding: 2rem 5rem;
border-radius: 15px;
font-family: "arial";
font-size: 3rem;
font-weight: 800;
}
/*
<a href="#" class="button">
<span>Button</span>
</a>
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment