How to make fix size button with <a> element

  • Posted on: 12 January 2017
  • By: jmu

I like to use <a> tag instead of <button> when I try to add button on my website. In this blog, I will share how to make some fix size buttons on one page to make them with same width and height. 

Let's make it work!

1. create same links by using <a>

<p><a href="#">Lorem</a><br />
<a href="#">Lorum Ipsum</a><br />
<a href="#">Lorum Ipsum dolor sit amet</a></p>

They should look like:

Lorem
Lorum Ipsum
Lorum Ipsum dolor sit amet

2. Then I used button generator to make my links look like some blue buttons (which is the default setting in CSS Button Generator website). Below is the button css code I used.

.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 13;
  -moz-border-radius: 13;
  border-radius: 13px;
  font-family: Arial;
  color: #ffffff;
  font-size: 10px;
  padding: 5px 20px 5px 20px;
  text-decoration: none;
}

After you add the css code from above, the button will look like:

Lorem
Lorum Ipsum
Lorum Ipsum dolor sit amet

3. Right now, let's fix the width to make them more pretty. Here, I will set my button width to be 300px.

Since <a> is an inline element, we cannot fix it width. Therefore, we need to set the property "display" to "block", and then we can fix our button width.

.update-btn { 
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 13;
  -moz-border-radius: 13;
  border-radius: 13px;
  font-family: Arial;
  color: #ffffff;
  font-size: 10px;
  padding: 5px 20px 5px 20px;
  width:300px;
  display: inline-block;
  text-align:center;
  text-decoration: none;
}

Button will look like:

Lorem
Lorum Ipsum
Lorum Ipsum dolor sit amet

And the fine button html code:

<p><a class="update-btn" href="#">Lorem</a><br />
<a class="update-btn" href="#">Lorum Ipsum</a><br />
<a class="update-btn" href="#">Lorum Ipsum dolor sit amet</a></p>

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.