How to create a button like this?

Hi there,

I am trying to create a button like this:

I am using the following CSS and HTML:

<a href="#" class="lets-start">start</a>
background: #ff0000;
content: "a";
background: #000000;
margin: -15px 15px -15px -15px;
padding: 15px;

I am trying to add some content to the left of the icon using the :before selector, but I am getting a 1px gap at the bottom.

What would be the best way to achieve a button like this?


How about if you apply

padding: 15px;

to the anchor itself as well as the anchor before?

I’m not seeing that, assuming that the a has the same 15px padding. But we don’t see all of your css.

Is there some more CSS that you’re keeping to yourself? My rendering doesn’t look like yours.

Please post “working pages” that demonstrate the issue.

I’m using Boostrap. I guess it could be something to do with line-height?

Bootstrap applies defaults that we would know nothing about unless you mentioned them. Please respect our need for complete code. Guessing is such a waste of time.

Please check SamA74’s and gandalf458’s code. If not satisfied, try this:

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style type="text/css">
a.lets-start {
    background: #ff0000;
a.lets-start:before {
    content: "a";
    background: #000000;
    margin: -15px 15px -15px -15px;
    padding: 15px;

<a href="#" class="lets-start">start</a>


This is a “working page”

Please note that line height is not the issue, but you do need the padding inside the outer box, the “a”. I gave it {display:table} to contain the margins that would otherwise collapse.

(I just looked at SamA’s code. This is essentially the same as his except for my {display:table})

Let us know if any of this helps, please.

Thanks, I’ve tried it, but I still have the 1px at the bottom. I guess it must be something in Bootstrap. Thanks for your help.

OK, can you post a “working page” that demonstrates the issue? You should be able to link to the bootstrap CDNs so we all use the same resources.

You might try assigning {display:inline-block; vertical-align:top;} to the pseudo-element. Now I’m guessing, though.

Thanks, I’ll try to put a page together

Maybe you want this Css code:


.dbl-btn {
	margin:5px; clear:right; float:left;
.dbl-btn a {
	padding:15px; float:left;

.dbl-btn {
.dbl-btn {


<div class="dbl-btn">
<a href="/" class="red">a</a>
<a href="/" class="blue"> Start</a>

PS: “dbl-btn” means “double-button”. Of course you can change it with anything you may want.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.