How to style a div like the button-element?

Question

I've noticed that when using the <button></button> element, the browsers will naturally assume that you want to center the inline content, and that the element is clickable. Is it possible to have a div behave in the same way through css? I went through the UA-stylesheet to see if I could figure it out, but nothing made it center it vertically.

The only other way i know to get the same result is with 2 divs. One wrapper with display: table, and a div with display: table-cell and vertical-align: middle.

But that creates an extra div. Is it possible to achieve the same behaviour with just one element?

Thanks.

Incompliant

extra div or extra element is always a normal need/requirement for many advanced features in HTML/CSS. So it's totally acceptable. – Chyack

You can do it if you are ok using set heights. Also line height will help. But if you do not know the width/height of your content, or it varies alot then you would have to alter this potentially. – Affix

Im not okay with set height, thats part of the problem that is solved with the button element. – Incompliant

@kingking: I know, and i am. But since the button element is already capable of getting around this it should be possible to do it on a normal div? But i guess form elements has special behaviour, that can't be replicated?. – Incompliant

@MaltheMilthers of course 1 div can't have the same functionality, the point is what you see is what the browser does internally, the button is designed to be rendered like that but div is not. – Chyack

Answer 1

http://jsfiddle.net/8Sj4A/3/ - this does center vertically and horizontally (just added text-align: center; to the originally answer)

div {
    display:inline-block;
    color:#444;
    border:1px solid #CCC;
    background:#DDD;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
    cursor:pointer;
    vertical-align:middle;
    max-width: 100px;
    padding: 5px;
    text-align: center;
}
div:active {
    color:red;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.6);
}

Faena

buttons do not have a max-width ;) – Suzisuzie

Its not centered vertically is it? if you add a height to that div, the content is still at top? or am i missing something? vertical-align does not work in inline-blocks does it? – Incompliant

correction.. vertical-align does not affect the contents of inline-blocks. thats only table-cells? right? – Incompliant

jsfiddle.net/8Sj4A/4 - display: table-cell; should sort the vertical align – Faena

Answer 2

You don't need multiple divs, check this JSFiddle, it's a single DIV that looks and behaves like a button.

the HTML:

<div class='btn'>
  this looks like a button
</div>

the CSS:

.btn{
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;

    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

If you want the button to actually link to something (behave like a link), simply change your HTML to this:

<a href='test.html' class='btn'>
  this looks like a button
</a>

If you use bootstrap you don't have to define the .btn class, it's included in that.

Neruda

Answer 3

Maybe you are asking the wrong question.

It may be simpler to give your button a class and then ensure the inline content is styled as you want.

Anything that you can put in a DIV, you should be able to put in a button.

Outside

More of a comment than an answer, don't you think so? – Imbecile

A bit of both :-). Styling a button would probably result in less custom CSS than the other answer here, as the baseline is closer to what is needed. – Outside

I know i could just use the button element, but since you can make divs behave like tables, I was hoping i could make them behave as buttons too. Gives me more sematic freedom :) feels weird to add cursor properties to an element to get rid of the pointer. – Incompliant

Answer 4

You can center the content of a divby adding the same amount amount of padding on each side.

padding:2px 10px;

This adds 2px to the top and bottom and 10px to the left and right, thus centering the content in the div.

I also styled the rest of the div to look and behave like a button. Looks are based on Firefox's default <button>.

http://jsfiddle.net/evSb5/2/

Nolen

Answer 5

this is exactly like the button type input

#divbut {
    display: inline-block;
    color: #444;
    background: #232323;
    cursor: pointer;
    padding: 5px;
    text-align: center;
    width: 200px;
    border-top: solid 2px #767676;
    border-left: solid 2px #767676;
    border-right: 2px #777171;
    border-bottom: 2px #777171;
    border-style: outset;
    box-sizing: content-box;
}

#divbut:active {
    color: green;
    border-top: 2px solid #777171;
    border-left: 2px solid #777171;
    border-right: solid 2px #767676;
    border-bottom: solid 2px #767676;
    border-style: inset;
}

<div id="divbut" class="center">
    <span class="unselectable">Button</span>
</div>

Cyst

Answer 6

css:

div.button {
  display:inline-block;
  -webkit-appearance:button;
  padding:3px 8px 3px 8px;
  font-size:13px;
  position:relative;
  cursor:context-menu;
}

html:

<div role="button" class="button">Press Me!</div>

This gets you as close as I could get to a real button.

For anything other than Chrome: look up appearance. Actually, just use Chrome... :)

Leptorrhine