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:

button

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!