10 Button Styles With 1 Line of HTML and Some CSS

In a previous post, I briefly mentioned a quick and easy CSS style (the Hover Effect) you could add to your links to make them stand out as clickable text.

 

When it comes to creating buttons with code, there are literally thousands of cool and fun ways you can create unique and memorable experiences for your users! Not only will each of these be unique button styles on their own, I’ll also be throwing in additional hover styles I like to use for each!

 

Let’s dive in…

 

1 Line of HTML

 

Create your button and give it a class to target with CSS

 

a<href=”www.natashaverdon.com” class=”button-style”> Click Here </a>

 

 

Pro-tip: I add a transition property to ALL of my CSS properties so that they go into their effects more smoothly. The transition property is attached to your regular CSS command section, not the hover commands. You can add a whole slew of extra styling features but for the sake of this I’m gonna keep it simple:

 

.button-style{

transition: 0.5s;

}

 

 

Now let’s have some fun…

 

 

1. Simple Underline Button

 

 

Target the border command to create an appearing/disappearing underline under your button. They key is to add in a transparent border in your regular CSS so that your content doesn’t shift down when your hover border appears. 

 

The CSS: 

 

.button-style{

border-bottom: 2px solid rgba(250, 250, 250, 0);

}

 

The Hover Effect: 

 

.button-style: hover{

border-bottom: 2px solid #E2B600;

}

 

 

 

2.  Bordered Button 

 

 

The CSS: 

 

.button-style{

border: 1px solid #e5bc5c;

color: #e5bc5c;

padding:7px;

transition: 1s;

}

 

 

The Hover Effect: 

 

 

.button-style: hover{

background-color:#e5bc5c;

color: white;

}

 

 

3. Rounded

 

 

To get rounded edges on your element, you’ll use “border-radius”. No need to go too big with your value, a small number like 5px will work great!

 

.button-style{

border: 1px solid #e5bc5c;

border-radius: 5px;

width:30%;

color: #e5bc5c;

padding:3px;

transition: 0.5s;

}

 

The Hover: see any of the above hover styles or keep on reading for some cool filling options.  

 

 

4. Partial-Highlight + changing color hover

 

 

Remember this tutorial on creating partial highlights? This trick also works great as a button style! Add a color-based hover effect to indicate to your audience that it’s a clickable button: 

 

 

The HTML and CSS can be found here

 

 

Your hover will use the exact same CSS just with a new background color. 

 

The Hover Effect: 

 

 highlight:hover{

background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #E2B600 50%);

}

 

 

5. Sinking Button  

 

 

Creating a sinking button effect is a lot easier than you would think. It’s just a matter of aligning your colors properly. 

 

Essentially, you will swap the colors from dark to light (except the border) and then add lighter shadows to the entire element and to the text. 

 

The CSS

.button-style5{
  border:2px solid #c28e2f;
  background-color:#e3b053;
  box-shadow: 1px 2px #c28e2f;
  color:white;
  transition: 0.3s;
}

 

 

The Hover Effect


.button-style5:hover{
  border: 2px solid #c28e2f;
  background-color: #faebd0;
  box-shadow: 1px 2px #e7ddaf;
  text-shadow: -1px -1px 0 #c28e2f;
  color: #e7ddaf;
}

 

 

 

6. Box-shadow Button

 

 

Add a retro box-shadow to your button then use a hover effect to change the color of the button or even just the shadow!

 

 

The CSS

 

.button-style{

  background-color:#E2B600;  padding:10px;  box-shadow: 5px 5px #888888;

transition: 0.5s;

}

 

 

The Hover Effect

 

.button-style:hover{

background-color:#D9EFE9;

}

 

 

7. Letter Spacing

 

 

This one is all about the hover. We’re simply going to bump up the spacing between letters:

 

 

.button-style:hover{

letter-spacing: 5px;

}

 

 

8.  Display Hidden Icon on Hover

 

 

I’ve come across plenty of versions of this same piece of code that have always seemed a bit too complicated for what it is! I’m dialing it way back with this CSS trick by just adding in arrows (using the code “\00bb”) and the “:after” effect. This will add in a new child element at the end of your parent element. That’s it! One line of code. 

 

 

.button-style:hover:after{

content: ‘\00bb’;

}

 

 

9. Fill to the Right

 

 

Now that we’ve conquered fills, transitions, and :after commands, let put them all together. 

 

 

Add in your button styling: 

 

 

.button-style9{
  border: 2px solid #333;
  position: relative;
  transition:.4s;
}

 

 

Create the filling effect with styling and coloring: 

 

 

.button-style9:after{
  position: absolute;
  content: “”;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ff003b;
  transition: all .35s;
}

 

 

Pro-tip: make sure your fill takes up the space of the whole element by creating a width: 

 

 

.button-style9:hover:after{
  width: 100%;
}
 

 

 

10. Growing Borders

 

 

This one starts off like button style 7 but then adds a bit more styling to make it really pop. Alternatively, ditch the letter spacing because to be honest, this one is cool all on its own. 

 

 

This particular style is a bit more complex than the others but it’s worth playing around with to make it work. We’re using hover, :after, and :before commands. the :before and :after will serve to add in the lines on top and below, and they will each need separate commands as well as additional hover commands. 

 

 

First, we’ll need to add some commands to the button as a whole:

 

.button-style9 {   

flex-direction: column;   

text-align: center; 

  width:20%; 

  transition: 0.5s ease-in-out;

}

 

Adding in “flex-direction:column” will keep your pretty lines from becoming two rectangles on either side of your button. 

 

 

Now we add in the preliminary hover commands: 

 

.button-style9:hover,.button-style9:active { 

letter-spacing: 5px; 

 transition:0.5s ease-in-out;

}

 

*remember when I mentioned that you can add all kinds of fun features to your transitions? Here’s a prime example of that. 

 

 

Now, we’ll add the styling for your two before/after lines. One thing to note, make sure you create a transparent border of the same size your eventual lines will be. Without this border, when you hover over your cool button, it will shift your surrounding content as it makes space for the new border. Adding in this transparent border will give your hover a place to fill in without making everything else shift around. 

 

 

.button-style9:after,.button-style9:before { 

border: 1px solid rgba(250,250,250,0); 

content: “ “; 

margin: 0 auto; 

transition: all 0.3s ease-in-out; 

width: 0;}

 

 

Add in your hover styling: 

 

 

.button-style9:hover:after, .button-style9:hover:before { 

border: 1px solid blue; 

width: 70%; 

transition: width 0.5s ease-in-out;

}

 

 

.button-style9:hover:before {  width: 70%;}

 

 

Want to keep playing around with these styles? Check out this CodePen and try them out for yourself!

 

 

 

Happy Coding!

 

X

Tash