Creating HTML buttons with padded borders is fairly simple. Throw a span inside an <a> tag, add a little CSS to make it look pretty, and you’re all set. But what happens if you can’t alter the HTML structure? Recently, our head code pirate, Adam Bradford, came up with a simple, yet elegant solution by manufacturing padding out of box shadows that we’ll show you how to use.

Take this button for example:

Example Button

It looks like it has padding applied the standard way. But no! There be CSS wizardry afoot. Before we break it down, let’s take a look at the code:


a.my-link {
  display: block;
  background: #00471C;
  color: #FFF;
  border: 1px solid #346447;
  box-shadow: 0 -3px 0px 0px #00471C, 0 3px 0px 0px #00471C;
  position: relative;
}

a.my-link:before,
a.my-link:after {
  position: absolute;
  content: " ";
  width: 10px;
  height: 33px;
  background-color: transparent;
  border: 3px solid #00471C;
}

a.my-link:before {
  border-bottom: none;
  border-left: none;
  top: -4px;
  right: -4px;
}

a.my-link:after {
  border-top: none;
  border-right: none;
  bottom: -4px;
  left: -4px;
}

There are a couple things to point out. First, note the box-shadow offsets. Combined with the border width for the :before and :after states, it represents our “padding” value. Raise or lower this value to raise or lower the padding you want. Don’t forget to alter the position values (top, right, etc.) of the :before and :after states by the same amount to make sure everything lines up.

Next, note the 1 pixel difference between the positioning of the :before and :after states. This is to account for the 1 pixel width of our border. If you want a wider border, you’ll have adjust this value by the same number of pixels, just as you would if you alter the amount of padding you want.

Lastly, make sure you position your <a> tag using relative. This will allow us to position the :before and :after states using absolute.

The reason for the :before and :after is that just using the box-shadow alone leaves small gaps in the top right and bottom left corners. Unfortunately, this means you won’t be able to use this technique in IE8, but given IE8’s rapidly declining usage stats, that isn’t much of a concern these days.

Give it a shot and let us know how it goes!

Leave a Comment

unicorn