160 button UI Design Examples

AMP Stories 2024

Button Design Inspiration

Buttons are one of the most important elements on the page. Buttons are used to drive CTA (Call to Action) on most pages, so it’s important to make them stand out and inviting to users. We hope these button design inspirations will provide you with some great ideas that you can use in your websites.

There are a huge variety of button designs out there, from material design to ghost buttons. In this roundup, we have collected some of the most beautiful button designs.

Don’t forget to check out our links design inspiration section.

HTML, CSS Code Snippets for button

Pride Rainbow Hover Effect on Hover For Button

Code by: Natalia Wojtkowska from...
Read More

button hover animation SVG

T-shirt Cannon Ordering Button Animation

button animation click animation ecommerce microinteractions shopping cart

Neumorphic Button Click Hover and Clicked Design

Loving the neumorphism trend in web design? You will love these various states for buttons in pure...
Read More

button click animation hover animation neumorphic design pure css

Offset Angled Cube Faces to Button Background on Hover Animation

A fancy CSS only button hover effect where you have the 2 faces of an angled cube that acts as a...
Read More

button hover animation pure css square

Angled Gradient Button Hover Effect in Pure CSS

Here is a fancy gradient button hover effect in pure CSS. The buttons are layed out in an angled...
Read More

button 3d gradient hover animation pure css

Button Hover Slide to Reveal Social Icons

This is a nice little share button in pure CSS by Yancy Min. When you hover over it, the button...
Read More

button pure css social icon

Checkbox Designed as Rocker Switch in Pure CSS

Love those rocker switches and the satisfaction of toggling it on or off? Do you want to...
Read More

check box button input field pure css toggle switch

Gradient Button with a Gleam Effect

Here is a spectacular button that has a pretty gradient effect and on hover, you have a gleaming...
Read More

button glint hover animation pure css

Upload Button to Circular Progress Bar MicroInteraction

This sweet upload button animates into a circle on click and that circle acts a progress bar. This...
Read More

progress bar button circle microinteractions

Bouncy Subscription Button to Email Field MicroInteraction

This fancy CTA button has a sweet micro-interaction on click, it animates into a text field asking...
Read More

email signup forms animation button click animation CTA microinteractions text field

1 2 3 4 5 6 7 8 9 10