Styling buttons with dislodged borders

From time to time, I’ll scroll through ThemeForest’s latest releases to keep up with design trends. 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.”

Step 1: Make a pink button

Our first step will be to code a link with a pink background, white text, and rounded corners.

HTML: <a href="#" class="dislodged-border">Click Me Please</a>

Step 2: Add the Dislodged Border

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

.dislodged-border — Provides the pink background (background: #FB3FDE), white text, inline-block display, padding, and position: relative.

.dislodged-border, .dislodged-border:before — Shared styles: border-radius: 30px and box-sizing: border-box.

.dislodged-border:before — The heart of the dislodged border:

• border: 2px solid #FB3FDE — matching pink border
• content: "" and display: block — bare minimum for pseudo-elements
• height: 100%; width: 100% — stays relative to parent dimensions
• position: absolute; top: 5px; left: 3px — creates the “dislodged” effect
• z-index: -1 — displays behind the parent element