How to create a button like this?

HTML & CSS
1

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>
a.lets-start{
background: #ff0000;
}
a.lets-start:before{
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?

Thanks

2

How about if you apply

padding: 15px;

to the anchor itself as well as the anchor before?

3

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

4

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.

5

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

6

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.

7

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/how-to-create-a-button-like-this/272888
toolman
-->
    <style type="text/css">
a.lets-start {
    background: #ff0000;
    display:table;
    padding:15px;
}
a.lets-start:before {
    content: "a";
    background: #000000;
    margin: -15px 15px -15px -15px;
    padding: 15px;
}
    </style>
</head>
<body>

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

</body>
</html>

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.

8

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.

9

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.

10

Thanks, I’ll try to put a page together

11

Maybe you want this Css code:

CSS CODE

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

.dbl-btn a.red {
	background:#00233F;
	}
.dbl-btn a.blue {
	background:#EB574B;
	}

HTML CODE

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

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

12

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