14 circle UI Design Examples

AMP Stories 2026

Circles in Web Design Inspiration

Using shapes like circles, squares, triangles is nothing new, we have seen these trends in web design for a very long time. In this section we have some really cool HTML and CSS snippets you can copy paste to make use of circular shapes in your web pages.

HTML, CSS Code Snippets for circle

Square, Emoji, Shadow And Line Particles Popper Effect On Button Click

Code by: Louis Hoebregts If you are having trouble with the pen, try the archived copy on GitHub....
Read More

particle animation button circle click animation game inspired square

Expand Google Maps from Circle to Full Screen Animation

hover animation about us circle full screen mobile optimised

Services In Icons With Circular Navigation

Code by: Jesús Castro from...
Read More

navigation menu circle SVG

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

Video Preview Button With Expand on Hover and Full Screen on Click

This is a very modern CSS only button where you have a small preview of the video playing in a...
Read More

button circle click animation full screen hover animation pure css UX video

Image Particle Animation Effect

This is an awesome particle effect animation that can be applied to images. This snippet is by...
Read More

circle direction aware image effects particle animation three.js