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

--

--

--

…did someone say animated CSS button?

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Online Pre-bootcamp at Gojek

Breaking Down REST APIs

Writing Plugins for Linux in Flutter

Facebook Messenger Platform v1.4

Turbo-Geth, What’s Different: The Database

AWS Greengrass — the Missing Manual

via Tumblr http://bit.ly/2kwkX4Y

3 Git Workflows to Showcase Unfinished Work

A canopy of trees from the ground level

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?

More from Medium

Here’s Why HTML and CSS is Still Relevant in 2022

Three design principles for your CSS layout

Grid vs. Flexbox: What to Use and When?

Getting Started With CSS Flex-Box(How To Create Boxes with Equal widths In a Container)