How to make and style a button using CSS | Reflect Digital
how_to_make_and_styleblog-detail
  • 17/02/2020
  • by Tiberiu

How to make and style a button using CSS

This is a fairly easy task in our opinion, but if you don’t have to do this every day, it can be a little bit tricky. So whether you work with websites, manage content or just want to learn how to make and style a button, this is a good place to start because you never know when you might need it! 

The mark-up is simple: All you need is either a button element or an anchor, both will work just fine. We’ve chosen an anchor in our example because we want to link off to one of our pages:

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


On its own you might get something that looks like this: Simple and clean. An anchor tag with 2 attributes: href for the link it’s meant to go to and a class of button so we can style it easily. You can style inline if you’d like, that’s absolutely fine. It will not allow you to set hover styles however so that’s why we use the class.

But don’t panic, we just haven’t applied any styles to it yet, that’s generally how an unstyled anchor tag looks like on a new website.

Notice it’s got an underline and not much else to it. Using CSS we can apply some padding, remove the underline, maybe make it bold, add a shadow and give it a background colour and text colour.

 .button {
   padding: 16px 42px;
   box-shadow: 0px 0px 12px -2px rgba(0,0,0,0.5);
   line-height: 1.25;
   background: #FC6E51;
   text-decoration: none;
   color: white;
   font-size: 16px;
   text-transform: uppercase;
   position: relative;
   overflow: hidden;
}

 

After these steps you should get something like this: 

It’s better but not quite what we are after and certainly not exactly what we saw at the start of this post. You can use the above CSS rules inline to do something like this:


For our button, however, we have added some extra styles to make it stand out. We changed the letter spacing, the easing and transition time and have added extra pseudo elements within the button to make it more interactive so whenever a user clicks the button we can see it change in style.That will show the same button as above without using the class. It’s not ideal but it will get the job done.

The idea is that we have a semi-transparent circle growing from the middle of the button to give it a fill-up effect.

.button {   
  padding: 16px 42px;   
  box-shadow: 0px 0px 12px -2px rgba(0,0,0,0.5);   
  line-height: 1.25;   
  background: #FC6E51;   
  text-decoration: none;   
  color: white;   
  font-size: 16px;   
  letter-spacing: .08em;   
  text-transform: uppercase;   
  position: relative;   
  transition: background-color .6s ease;   
  overflow: hidden;   
  &:after {     
    content: "";     
    position: absolute;     
    width: 0;     
    height: 0;     
    top: 50%;     
    left: 50%;     
    transform-style: flat;     
    transform: translate3d(-50%,-50%,0);     
    background: rgba(white,.1);     
    border-radius: 100%;     
    transition: width .3s ease, 
    height .3s ease;   
  }   
  &:focus,   
  &:hover {       
    background: 
    darken(#FC6E51,7%);   
  }   
  &:active {     
    &:after {       
      width: 200px;       
      height: 200px;     
    }   
  } 
}

Our pseudo-element (:after) is positioned absolute and in the middle of the button. We use transform to make it hold its position in the middle and whenever a user clicks on the button and activates the (:active) status of the button that will trigger the pseudo-element (:after) to change its size to a big circle. We will only see it partially because we’ve set the overflow property for the anchor to be hidden so anything within it that is larger will not be seen.

In the end, you should get something like this: We deliberately left out the font so you can figure that out yourself. Have fun!

Follow more simple CSS tricks on: https://codepen.io/reflectdigital/pen/KKKRXby or see more on our blog: https://www.reflectdigital.co.uk/blog 

Trusted digital agency

UK Search Awards - SEO Winner
Wirehive Best Use of Search 2018
Drum Search Awards SEO finalist 2018
UK Search Awards 2018 SEO Award
5-wirehive-performance-marketing-campaign-finalist-v2
6-wirehive-consumer-site-of-the-year-finalist-v3

Maidstone - Kent

3rd Floor, Kestrel House, Knightrider Street, Maidstone, Kent, ME15 6LU

Soho - London

2 Bourchier Street, Soho, London, W1D 4HZ

Cape Town - South Africa

16 Edison Way, 1st Floor, Block D, Edison Square, Century City, Cape Town, 7441 South Africa

Proud to be a Lab Logo agency

5 Star reviews

Reflect Digital is rated 4.95 out of 5, based on 22 reviews on Facebook & Google