A Trio of Buttons for a Bubbly, Colorful Site

Primary

.primary-button {
margin: 20px;
padding: 15px 35px;
text-align: center;
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
border-radius: 30px;
border: none;
}
background-size: 200% auto;
color: #083136;
background-image: linear-gradient(
to right,
#ffbc5b 0%,
#ff5645 50%,
#f7213d 50%,
#dd07b7 100%
);
transition: 0.5s;
.primary-button:hover,
.primary-button:focus {
background-position: right center;
outline: none;
}
.primary-button:active,
.primary-button:active:after {
outline: none;
background-position: left center;
}

Secondary

.secondary-button {
border-radius: 30px;
padding: 10px 30px;
margin: 20px;
border: none;
color: #07373b;
background-image: linear-gradient(
to right,
#e8fffb 0%,
#85fff1 40%,
#47d4e5 100%
);
}
.secondary-button:active {
transform: translateY(3px) translateX(3px);
}

Tertiary

.tertiary-button {
border: none;
color: #0d5059;
background-color: #adfff5;
padding: 20px;
}

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abbey Perini

Abbey Perini

…did someone say animated CSS button?