How to Style an Anchor Tag to Look Like a Button with the Same Height as the Button

How to style an anchor tag to look like a button with the same height as the button?

This should do it:

display: inline-block;

The reason your height isn't working is because the anchor tag marks an inline element. The height property doesn't apply to inline elements, and the vertical margin, border and padding act differently.

Firefox 2 doesn't support inline-block, if you still need to support it, but you can usually get it to work by adding a rule display:-moz-inline-box before the above line.

Alternatively, you could try using the line-height property.

How to design/make an anchor tag look the exact same like a button (very vague, but looks at the details below)

slices off part of the anchor tag when it reaches the <br> tag

This can be fixed by applying display:block to the anchor:

.anchorBTN {
  padding: 5px 10px;
  background-color: white;
  text-decoration: none;
  background-color: #EFEFEF;
  color: black;
  display: block;
}

<b>With display:block:</b><br/>
<a class="anchorBTN">PLACEHOLDER PLACEHOLDER<br/>PLACEHOLDER PLACEHOLDER PLACEHOLDER PLACEHOLDER</a>

<hr>

<b>Without display:block</b><br/>
<a class="anchorBTN" style="display:unset">PLACEHOLDER PLACEHOLDER<br/>PLACEHOLDER PLACEHOLDER PLACEHOLDER PLACEHOLDER</a>

How to make an HTML anchor tag (or link) look like a button?

Using CSS:

.button {

    display: block;

    width: 115px;

    height: 25px;

    background: #4E9CAF;

    padding: 10px;

    text-align: center;

    border-radius: 5px;

    color: white;

    font-weight: bold;

    line-height: 25px;

}

<a class="button">Add Problem</a>

How do I make an html link look like a button?

Apply this class to it

.button {

  font: bold 11px Arial;

  text-decoration: none;

  background-color: #EEEEEE;

  color: #333333;

  padding: 2px 6px 2px 6px;

  border-top: 1px solid #CCCCCC;

  border-right: 1px solid #333333;

  border-bottom: 1px solid #333333;

  border-left: 1px solid #CCCCCC;

}

<a href="#" class="button">Example</a>

Have the same height for a link, button and input

You need to make sure your font-family is the same for all elements (currently your anchor has a different font) and also make sure your elements are block or inline block, otherwise the padding isn't applied:

* {

  box-sizing: border-box;

}

html {

  font-size: 62.5%;

}

body {

  font-size: 2rem;

}

button,

input,

a {

  display: inline-block;

  font-family: arial;

  background: none;

  border: 1px solid grey;

  color: black;

  font-size: 1.6rem;

  outline: none;

  padding: 5px;

  text-decoration: none;

}

<button>Hello</button>

<input type="text" placeholder="Hello" />

<a href="#">Hello</a>

How can I contain an anchor tag inside my button tag at 100% width and height

The reason you cannot adjust the height and width of your <a> is because anchor elements are inline-elements.

An inline element does not start on a new line and only takes up as much width as necessary.

If you want to adjust the height and width you would need to specify another display property, e.g.

a { display: inline-block; }

For what it's worth, it's better to omit the button inside the anchor tag, just style the anchor tag as your button to make it act like a button.

e.g. if you are using bootstrap, you can do

<a href="#" class="btn btn-primary" role="button">Get Started</a>

How to place a button at the same height as a title to the right?

You can use rows and columns to keep content aligned in bootstrap. Rows have 12 columns so here I've used 10 columns for the heading and 2 columns for the button and aligned the button right.

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
  <div class="row">
    <div class="col-10 my-2">
        <h2 class="text-start">Signalétique de SOLVAY BE (Euronext Brussels)</h2>
    </div>
    <div class="col-2 my-2 text-right">
        <button type="button" (click)="goBack()" class="btn btn-primary">Retour</button>
    </div>
    <hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>

</div>
</body>
</html>

How to Style an Anchor Tag to Look Like a Button with the Same Height as the Button