Question

I'm trying to design custom buttons. For this I created the following css (see in snippet below).

When I use the css with a <button> it works as intended. If I use it with a <a> element instead the button has a width of 100%. I know that using display-block is the reason for this, but I don't know why it works with my button but not with my <a> element. They both have the same display property and in my opinion they should behave the same way.

(The buttons should be aligned below each other and be placed in the middle of the parent .buttonRow).

Both buttons should look like the first example (using <button>)

.buttonRow {
  display: block;
  text-align: center;
}

.button {
  display: block;
  margin: 0 auto;
  margin-bottom: 15px;
  background-color: #ccad91;
  color: white;
  font-size: 18px;
  padding: 17px 50px;
  border-radius: 35px;
  border: none;
  outline: none;
  outline: 0;
}

<div class="buttonRowl">
  <button class="button">Proceed</button>
  <a class="button" href="index.html">Cancel</a>
</div>

you don't need to use flexbox ... simply consider `display:table` for button and `a` — Temani Afif, Sep 10 '19 at 09:38

gearsdigital · Accepted Answer · 2019-09-10T09:47:54.770

1

The reason why your button behaves differently is that a button is a so called "replaced element" whose (appearance and) dimension are defined by the operating system/browser. Anyhow I'ld suggest to use flex-box here.

.buttonRow {
  display: flex;
  flex-direction: column;
}

.button {
  margin: 0 auto 15px auto;
  background-color: #ccad91;
  color: white;
  font-size: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding: 17px 50px;
  border-radius: 35px;
  border: none;
  outline: none;
  text-decoration: none;
}

<div class="buttonRow">
  <button class="button">Proceed</button>
  <a class="button" href="index.html">Cancel</a>
</div>

edited Sep 10 '19 at 09:47

answered Sep 10 '19 at 09:28

gearsdigital

13,915
6
44
73

Flexbox seems to work. Just curious: do you know why it doesn't work in my example? It seems like there is somethings else, besides the display-property that regulates the way my button is displayed – Tim Gerhard Sep 10 '19 at 09:34
I updated my answer to answer your question about why it doesn't work as exected – gearsdigital Sep 10 '19 at 09:48

element display-property differently than element

1 Answers1