Bryan Hadaway's Blog
Your Account:   subscribe

bhadaway@gmail.com | Social: Facebook Twitter LinkedIn Google+

How to Create Circles with CSS





UPDATE – For future-proofing and responsive design, you can simply use:

border-radius:50%

Making circles with CSS3 is very simple, but not very well supported with older browsers. If your design depends on circles (and you need to accommodate users on older browsers) you should definitely use images instead.

However, if your audience is more tech-savvy (meaning they’ll likely be using the latest browsers to view your site) or you feel it’s otherwise safe to start using CSS3 on your site the following styles will work in the latest versions of Firefox, Chrome, Safari and even IE:

Code Last Refreshed: August 13th, 2012

Plain Circle With or Without Text Inside

Hello

CSS

.circle{width:100px;height:100px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;background:#000}

HTML

<div class="circle">Hello</div>

going a step further…

Clickable Link Circle Button

Hello

CSS

.button{display:block;width:100px;height:100px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;background:#000}

HTML

<a href="#" class="button">Hello</a>

going even a step further…

Menu Hover Effect Circle Button

Hello

CSS

.menu{display:block;width:100px;height:100px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;text-decoration:none;background:#000}.menu:hover{color:#ccc;text-decoration:none;background:#333}

HTML

<a href="#" class="menu">Hello</a>

and getting really stylish…

Stylish Menu Hover Effect Circle Button

Hello

CSS

.stylish{display:block;width:100px;height:100px;border-radius:66px;border:4px double #ccc;font-size:20px;color:#666;line-height:100px;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fff;background:#ddd}.stylish:hover{border:4px double #bbb;color:#aaa;text-decoration:none;background:#e6e6e6}

HTML

<a href="#" class="stylish">Hello</a>

The Formula

Just make the radius half of the width and height to make a perfect circle. It’s that simple.

Outset/Inset Button Circle

Hello

CSS

.inset{display:block;width:100px;height:100px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-shadow:0 1px 0 #666;text-align:center;text-decoration:none;box-shadow:1px 1px 2px #000;background:#cccbbb;opacity:0.95}.inset:hover{color:#eee;text-shadow:0 0 1px #666;text-decoration:none;box-shadow:0 0 4px #222 inset;opacity:1}

HTML

<a href="#" class="inset">Hello</a>

Multicolored Circle

CSS

#circle-container{width:100px;height:100px}.quarter{width:50px;height:50px}.top-left{border-top-left-radius:50px;background:#09f;float:left}.top-right{border-top-right-radius:50px;background:#666;float:right}.bottom-left{border-bottom-left-radius:50px;background:#aaa;float:left}.bottom-right{border-bottom-right-radius:50px;background:#333;float:right}

HTML

<div id="circle-container"><div class="quarter top-left"></div><div class="quarter top-right"></div><div class="quarter bottom-left"></div><div class="quarter bottom-right"></div></div>

Gradient Circle

Now that the standard for CSS gradients is here, there’s no stopping us!

CSS

.grad{width:100px;height:100px;border-radius:50px;background:linear-gradient(to bottom, #40b3ff, #09f)}

HTML

<div class="grad"></div>

NEW: Change Text Upon Hover

JavaScript, eat your heart out.

HelloBye :(

CSS

.change .two{display:none}.change:hover .one{display:none}.change:hover .two{display:inline}

HTML

<a href="#" class="change"><span class="one">Hello</span><span class="two">Bye :(</span></a>

If you need any help don’t hesitate to ask in the comments below.

Thanks for reading, Bryan

Other Reads

  • n00bcoder

    Can I put images on these circles? Like PNGs?

  • http://bryanhadaway.com/ Bryan Hadaway

    Sure, you could put images inside them with HTML, or even background/border images with CSS.

  • Anna

    Hello, i’ve done this and it’s pretty awesome! Thanks

    I’ve used it for my menu and every tab is different circle but i can’t make them inline. I’ve used this –

    .circle{width:100px;height:100px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;background:#000}

    .button{display:block;width:150px;height:150px;border-radius:75px;font-size:15px;color:#fff;line-height:150px;text-align:center;background:#000}

    #navlist ul

    {

    display: inline;

    list-style-type: none;

    padding-right: 20px;

    }

    but it’s still not working, any advice?
    Thank you! :)

  • Anna

    Oh i fixed it!

    #navlist li

    {

    display: block to display:inline-block;

    list-style-type: none;

    padding-right: 20px;

    float:left;

    }

    Thank you again!

  • http://bryanhadaway.com/ Bryan Hadaway

    Glad to hear it and you’re welcome.

  • Janis Howell

    I’ve made the circle buttons, but I would now like to know how to make them link to other pages.

    This is what I have in my HTML:

    { about }

    { contact }

    { work }

    { prices }

    I’ve tried putting a link inside, but it doesn’t work.

    {about}

    What do you suggest?

    Thank you!

  • Janis Howell

    Sorry, I didn’t think the code would be active.

    This is what I did:

    div class=”centered”

    a href=”#” class=”about”>{ about } /a

    a href=”#” class=”contact”>{ contact } /a

    a href=”#” class=”work”>{ work } /a

    a href=”#” class=”prices”>{ prices } /a

    /div

    I tried doing this:

    a href=”#” class=”about” a href=”about.html”>{ about } /a

  • http://bryanhadaway.com/ Bryan Hadaway

    Simply replace # with the intended URLs.

  • Jane

    Hi Bryan,

    I would just like to say these buttons are great!

    I’m using the inset/outset buttons but need them to go horizontally across the page as they are vertical at the moment, ive tried changing the display to in-line but this messes up the shapes of the circles. I’ve also read some other comments and tried float left but cant seem to get anything working!

    Any ideas how i could make them in a line horizontally across the page?

    Thanks,

    Jane

  • http://bryanhadaway.com/ Bryan Hadaway

    Do you have a live example of your circles I can see?

    Thanks

  • yangzh

    Hi. How about adding multiple lines? for example Helloworld

  • yangzh

    I mean, there is a between “hello” and “world”

  • http://bryanhadaway.com/ Bryan Hadaway

    Not quite sure what you’re asking.

  • Nirmal Negi
  • neermuzic

    here is the best way to create circle in css :)

    http://sqeets.com/articles/making-a-circle-in-html-using-css/