CSS Tutorial: How to code buttons with dislodged borders

Back to Blog

From time to time, I’ll scroll through ThemeForest’s latest releases to keep up with design trends and see what’s selling on industry marketplaces. A PSD called United Forms Creative Agency caught my eye.

In particular, that pink button that looks like it’s been detached from its border. To describe this effect, I officially coin the term “dislodged borders” and in this tutorial, I’ll show you exactly how to do it.

Step 1: Make a pink button-like link and forget about the dislodged border for now

Our first step will be to simply code a link with a pink background, white text, and rounded corners. The following CSS will get us there:

See the Pen Dislodged Button Border before dislodged border by Leland Fiegel (@leland) on CodePen.

Which will style the following HTML: <a href="#" class="dislodged-border">Click Me Please</a>. This markup will not change throughout the tutorial. We want to make sure our CSS does the heavy lifting.

Step 2: Add the Dislodged Border

When coding the dislodged border, we want to make sure the width stays relative to the potentially variable width of the link. Styles like this tend to be repeated throughout websites, so one block of CSS should rule them all.

We can accomplish this through the use of CSS pseudoclasses, absolute positioning, and percentage-based widths and heights.

Since we always want to make sure the border radius for both to match, let’s refactor our CSS to account for that.

While we’re here, we’ll make sure both are using border-box as well. Without that, our positioning will get a little weird later on.

We end up with the following CSS:

And of course, the same markup, to end up with this:

See the Pen Dislodged Button Border by Leland Fiegel (@leland) on CodePen.

Now we have a button with a dislodged border. From here, you can get fancy with effects for different states, like hover and focus. 🙂

Line by line CSS breakdown

It wouldn’t be much of a tutorial if I just gave you the code and didn’t explain how I arrived to it, so here’s a line by line breakdown, broken up into each selector.

.dislodged-border { … }

Styles in here apply to the top level element. It’s what provides the meat and potatoes of the appearance of the link.

background: #FB3FDE;

This provides the pink background color to the link. It matches the color used in the “dislodged border” below, which we’ll get to later.

color: #fff;

This provides the white text color of the link.

display: inline-block;

Anchor elements (the “a” tags, used for links) are by default, inline elements. By changing this to inline-block, we have more control over padding that gives the button a nice and plump look. Remove this line in a forked CodePen to see what I mean.

padding: 15px 20px 14px;

15 pixels of padding on the top. 20 pixels of padding on the left and right. 14 pixels of padding on the bottom. This isn’t entirely necessary for the effect, but the link would just look bad if it had no padding with the text smushed all up against everything. This also ties into the “inline-block” CSS above. Without it, these padding numbers wouldn’t apply.

font-family: sans-serif;

Again, not explicitly necessary to define a font here. This is just so I could match the same basic look as the dislodged button border that inspired me, which also had a sans-serif font (albeit a bit thinner).

text-decoration: none;

This makes sure the anchor element doesn’t have an underline underneath, to better mimic the look of a button.

position: relative;

This will makes sure the absolutely positioned pseudo-element we define later is positioned relative to this element. Otherwise, the dislodged border could appear in an unwanted place.

.dislodged-border,
.dislodged-border:before { … }

These are styles that apply to both the button itself, and the pseudoclass below. Anything we want consistent across both will be defined here.

border-radius: 30px;

The “dislodged border” effect relies on having the exact same rounding to the corners. So this is a perfect place to define it.

box-sizing: border-box;

Many websites will declare border-box sizing to all elements, so if that’s the case on wherever you’re implementing these dislodged border styles, this line isn’t necessary.

.dislodged-border:before { … }

These styles are the heart and soul of the dislodged border.

border: 2px solid #FB3FDE;

A solid border 2 pixels wide with the same pink color used earlier.

content: “”;

This is the bare minimum you need to get a pseudo element to actually display something.

display: block;

Related to the “bare minimum” comment above.

height: 100%; width: 100%;

This is what makes sure our displaced border stays relative to the dimensions of the parent anchor element.

position: absolute; top: 5px; left: 3px;

This positions the dislodged border 5 pixels from the top, and 3 pixels to the left of the parent anchor element. These styles combined give the dislodged border its “dislodged” effect.

z-index: -1;

This makes sure the dislodged border doesn’t display on top of the parent anchor element. Remove this line in a forked Pen to see what I mean.