9 CSS Round Button Examples

In this post, I will go over 09 buttons and their animations examples. The examples will have the following

common CSS and HTML structure:

The common HTML

The common HTML is as follows. We have a base .btn class and each example will build onto that.

So for instance, with example 01, we add a .btn-01 CSS class.

<button class="btn">Button</button>

Common CSS

Below is the base CSS that we will use for all the examples.

.btn
{      
    overflow: hidden;
    border: 2px solid white;  
    font-family: 'Arial';
    font-size: 1rem;
    color: white;
    background: none;
    cursor: pointer;
    padding: 25px 80px;
    display: inline-block;
    margin: 15px 30px;
    text-transform: uppercase;
    outline: none;
    position: relative;
    transition: all 0.3s;
    border-radius: 4rem;
    font-weight:700;
}
.btn:after{
    content: '';
    position: absolute;
    z-index: -1;
    transition: all 0.3s;
   box-sizing: border-box;
}

The key to make the button have a rounded effect is the *border-radius. This property accepts 2 types of values - a fixed length or percentage.

To make the button round - we set the border-radius to be 4rem. If we decide to use the percentage, then the button will turn out to be more ellipic,

since the percentage refers to the button’s width/height.

Example 01 - basic CSS round button

The most basic button - to have the background change color to white when the user hovers over it.

We just need to also change the text color to blue since we will not be able to see the text due to the existing white color.

Example 02 - round button with background slide (vertical) on hover

For this example, we want to create a slide effect when the user hovers over the rounded button.

To do this, we use the :after pseudo element. This just creates a element that is the last child of the button.

(Alternatively, you can also use the :before - which creates a pseudo element before the button).

So now we can style the :after element - the important bit is to give it height = 0 and 100% width.

When the user hovers over the button, we change the :after pseudo element to have height:100%. This gives us

our sliding effect from top to bottom.

<button class="btn btn-02">Button</button>

.btn-02:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background: #fff;
}

.btn-02:hover,
.btn-02:active {
  color: #457b9d;
}

.btn-02:hover:after,
.btn-02:active:after {
  height: 100%;
}

Example 03 - rounded button with background slide (horizontal) on hover

Simlar to the above example, we can do the slide as horizontal (left to right) instead of vertical.

The difference here is that we change our :after pseudo element to have width = 0 and height = 100%.

When the user hovers over the pseudo element, we change the width to be 100%.

Another thing of note with these sliding effects is the overflow: hidden; property in .btn. Now if you remove that, then you will see that

the slide with be a rectangle and overlay the rounded corners.

<button class="btn btn-03">Button</button>

.btn-03:after {
  width: 0; /* this is different to example 02*/
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
}

.btn-03:hover,
.btn-03:active {
  color: #457b9d;
}

.btn-03:hover:after,
.btn-03:active:after {
  width: 100%;
}

Example 04 - push button effect

The below example, we are creating a button with a push effect when the user hovers over it. To do this we can get rid of the white border and use box-shadow property.

Whe the user hovers over the button, we change the box-shadow to increase vertically. In our case, we changed it from 4px to 6px and move it from the top.

<button class="btn btn-04">Button</button>

.btn-04{
  box-shadow: 0 6px #023047;
  background-color:white;
  color:#457b9d;
}
.btn-04:hover{
  background-color:white;
  box-shadow: 0 4px #023047;
  top: 2px;
}

Example 05 - rounded button with expand on hover

Example 06 - rounded button with gradient border

This example, we are doing a button with gradient borders. Gives of a futuristic look and attract your users to click on it.

Example 07 - round button with gradient background (red)

For this example, we have a button with linear gradients with red colors. When the user hovers, we slide the gradient to give a shine effect.

The key to creating this shine effect is the background-position: 100% 0; CSS property. We first define the background to be quite large:

background-size: 300% 100%;

Additionally it will have multiple red colors in the background image:

background-image: linear-gradient(to right,
    #ed6ea0,
    #ec8c69,
    #f7186a,
    #fbb03b
  );

Now when the user hovers to over the button, we just shift the background 100% horizontally - background-position: 100% 0;

Example 08 - CSS round button with gradient background (blue)

This is similar to the above example, but using blue colors. We use the same technique to shift the blue gradients to give a shine animation.

For this button we use the following linear gradient for the background:

  background-image: linear-gradient(
    to right,
    #25aae1,
    #4481eb,
    #04befe,
    #3f86ed
  );
  

Example 09 - round button stripe on hover

This button example gives the impression of the stripes that appear in barber shops. This effect can be achieved with just

animating the background stripes infinitely.

Summary

This article went through 9 examples of creating rounded CSS buttons. The key to creating rounded buttons is using the border-radius CSS property.

This propery accepts fixed length and percentage values. In our case we want to use fixed length, since the percentage values will have a ellipse effect

due to being based on the button’s width or height. To have interesing hover animations, we can use the :after pseudo element to create slide effects by

changing the height or width when the user hovers over the button.

Additionally we can create interesting gradient effects by using the background-size and moving the background with background-position when

the user hovers over the button.