30 CSS Circle Button Examples

An assembly of the top free CSS circle button code examples. Each of these carefully selected CSS circular buttons contains uniquely implemented code, animations, effects, colors, and designs that make them practical and ideal for web design applications.

css circle buttons featured

Hover to play
Title:

Face button

Author:

Katherine Kato

Created on:

November 11, 2019

Made with:

HTML, SCSS, Javascript

Responsive:

Yes

Dependencies:

Saas, Tweenmax.js

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A creative, circle button with a face is created using HTML, SCSS, and Javascript. When you hover over the button, it will show the eyes of the face towards how you will move your mouse with realisitic animation effects.

Hover to play
Title:

Fly away send circle button

Author:

Nightboard

Created on:

November 03, 2021

Made with:

HTML, CSS(Stylus), jQuery

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An awesome flyaway send circle button is created using HTML, CSS(Stylus), and jQuery. When you click on the button, it will makes a paper airplane fly out of this "Send" button with amazing animation effects.

Hover to play
Title:

Share button

Author:

Mostafa Hassani

Created on:

June 25, 2016

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, share button with circle shape is created using HTML, CSS, and jQuery. When you hover over the button, it will show slight shadow effects. When you click on the button, it will show other social media icons with smooth circular animation effects.

Hover to play
Title:

Colorful flower popup menu

Author:

Jasper LaChance

Created on:

May 24, 2017

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, innovative colorful flower popup menu button is created using pure HTML and CSS. When you hover over the button, it will shrink the button. When you click on the button, It will show the other menu buttons with amazing animation effects.

Hover to play
Title:

Simple button hover

Author:

Magnificode

Created on:

August 21, 2015

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful circle button with hover effects is created using HTML and SCSS. When you hover over the button, it will animate the button icon with spinning effect and show rounded layered borders around the button that looks great with the dark color scheme.

Hover to play
Title:

Add button

Author:

Mert Cukuren

Created on:

July 09, 2018

Made with:

HTML, SCSS, Javascript

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A stylish, modern add circle button is created using HTML, SCSS, and Javascript. When you click on the button, it will shrink the button to capsule shape and show all the menu items and toggle its state back when you click again with smooth animations.

Hover to play
Title:

Circle button hover

Author:

Acrata

Created on:

September 20, 2016

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple circle button with hovering effects is created using pure HTML and CSS. When you hover over the button, it will fill the background color and toggle the icon size with smooth animation effects.

Hover to play
Title:

Circle button with outside border

Author:

Verlic Redclaw

Created on:

May 23, 2015

Made with:

HTML, CSS(Less)

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful circle button with hover effects created using pure HTML and CSS. When you hover over the button, It will animate the outside border of the button and make the background brighter so the button looks shiny.

Hover to play
Title:

Circle button

Author:

Pedro Bernardo

Created on:

August 23, 2016

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful circle button with hovering effects created using HTML and SCSS. When you hover over the button, it will expand the button and make it like a capsule button with “see more” text with smooth animation effects.

Hover to play
Title:

Animated circle button

Author:

Joe Taylor

Created on:

February 16, 2019

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An animated circle button is created using HTML and SCSS. When you hover over the button, it will fill the border in a clockwise direction with a smooth animation effect and also shrink the button background a little bit giving an amazing look to the web page.

Hover to play
Title:

Social share button

Author:

Kyle Lavery

Created on:

May 05, 2017

Made with:

HTML(Pug), SCSS, jQuery

Responsive:

No

Dependencies:

Saas, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple social share button is created using HTML, SCSS, and jQuery. When you click on the button, it will change the background color to white from the center and show three buttons in different color. It toggles the state when you click back on the page.

Hover to play
Title:

Lollipop Transition

Author:

Jeff Carthy

Created on:

January 07, 2015

Made with:

HTML(Haml), Sass, jQuery

Responsive:

No

Dependencies:

Saas, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A stylish and elegant circle button is created using HTML, Sass, and jQuery. When you click on the button, it will animate the icon with a spinning effect and show a model with quick animation effects. It also toggle the state when you click it again.

Hover to play
Title:

Slide out social buttons

Author:

Steven Schobert

Created on:

November 20, 2014

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, awesome slide-out social buttons are created using HTML and SCSS. When you hover over the button,it will show the social platform name with a smooth slide-out effect from the button and toggle its state back when you are not hovering.

Hover to play
Title:

Button morphing into form

Author:

Greg Hovanesyan

Created on:

February 19, 2017

Made with:

HTML, SCSS, Vue.js

Responsive:

No

Dependencies:

Saas, Vue.js

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, amazing add product button is created using HTML, SCSS, and Vue.js. When you click on the button, it will show the add product form with a nice morphing animation effect from the button that looks amazing.

Hover to play
Title:

Circle button with hover effect

Author:

Yoan Marchal

Created on:

February 25, 2016

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An attractive circle button with hover effects is created using HTML and SCSS. When you hover over the button, it will fill the background of the button from the center with smooth animation effects.

Hover to play
Title:

Material circle button

Author:

Andrew Egbert

Created on:

September 06, 2017

Made with:

HTML, Sass

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A sophisticated, material circle button is created using HTML and Sass. When you click on the button, it will show a spinning animation effect on the icon. When you click back on the web page, it will toggle the button state.

Hover to play
Title:

Pure CSS circle button

Author:

Sarah

Created on:

September 28, 2017

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple circle button is created using pure HTML and CSS. When you hover over the button, it will fill the button with the transparent background leaving the border. When you click on the button, it will fill the transparent white background color to the whole button with a smooth transition effects.

Hover to play
Title:

Neon circle button

Author:

MrKivix

Created on:

November 06, 2020

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A glowing neon circle button is created using HTML, CSS, and jQuery. When you hover over the button, it will pop out the button with a glowing effect. When you click on the button, it will toggle the button text to hello world and toggles back to click me when you click outside.

Hover to play
Title:

Circle button animation

Author:

Nightboard

Created on:

November 02, 2021

Made with:

HTML, SCSS, Javascript

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, classic circle button is created using HTML, SCSS, and Javascript. When you hover over the button, it will change the button text and also show nice animation with border effects and zoom out the button with a beautiful circular animation.

Hover to play
Title:

Bubbly circle button

Author:

Nightboard

Created on:

November 03, 2021

Made with:

HTML, SCSS, Javascript

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A decorous, amazing bubbly circle button is created using HTML, SCSS, and Javascript. When you click on the button, it will show amazing bubble effects around the borders of the button. The button looks cool with the radiant gradient for background image.

Hover to play
Title:

Pulsing button

Author:

Sean Michael

Created on:

July 24, 2013

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An attractive, pulsing button is created using HTML and SCSS. It will show infinite animation with the pulses effect given on the border with quick animation effects. When you hover over the button, It will stop the pulsing effect.

Hover to play
Title:

Animated radial circular menu

Author:

Creative Punch

Created on:

April 17, 2014

Made with:

HTML, CSS, Javascript

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, animated radial circular menu button is created using HTML, CSS, and Javascript. When you hover over the button, it will brighten the button background. When you click on the button, it will show the social media icons as a menu items with nice animation and fade-in effects.

Hover to play
Title:

Interactive circular button

Author:

Tommy Small

Created on:

August 20, 2018

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An interactive circular button is created using HTML, CSS, and jQuery. When you hover over the button, it will show smooth border expanding effects. When you click on the button, it will show the glowing border with smooth animation and fade-out effects.

Hover to play
Title:

Animated social buttons

Author:

Stephen Burgess

Created on:

June 13, 2013

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A Classic, modern circle social buttons are created using pure HTML and CSS. When you hover over the button, it will fill the background color from the center of the circle with smooth animation effects and also toggle the icon color in the button.

Hover to play
Title:

Attract hover effect

Author:

Louis Hoebregts

Created on:

September 10, 2020

Made with:

HTML, SCSS, Javascript

Responsive:

No

Dependencies:

Saas, gsap

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant rounded button is created using HTML, SCSS, and Javascript. When you hover over the button, it will zoom out the button and animate as per the movement of the mouse pointer.

Hover to play
Title:

Hover effect on circle button

Author:

Sazzad

Created on:

April 24, 2015

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, four social buttons with hover effects are created using pure HTML and CSS. When you hover over the button, it will fill the background color of the button from the center with a smooth animation effect.

Hover to play
Title:

Button hover circle effect

Author:

Naveen

Created on:

December 10, 2020

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, circle button with hover effect are created using pure HTML and SCSS. When you hover over the button, it will show a circular ring like animation with borders around the button that looks amazing.

Hover to play
Title:

Circle button for weather app

Author:

Jack

Created on:

July 09, 2017

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, circle button with 3d looks are created using HTML, CSS, and jQuery. When you hover over the button, it will change the background color and text color. When you click on the button, it will show a 3d press effect with a button and also toggle the background color when you click on another button.

Hover to play
Title:

Hover effect at activities

Author:

Maximsv

Created on:

August 21, 2016

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple circle button with hover effects are created using pure HTML and SCSS. When you hover over the button, it will show a thick border around the button with quick fade-in effects.

Hover to play
Title:

Red fire circle button

Author:

Meiller

Created on:

December 30, 2015

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An attractive fire button with an infinite animation is created using HTML, CSS, and jQuery. When you hover over the button, it will change the background color from white to red and also show fire animation effects with the dots flying in the different direction.