Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It is normally better to use padding since the button will support different text lengths and let the padding control the width and height depending on the text within the button, However if you want your buttons to be one size and one size only for example: A button with Submit, and a button with Download will be 2 different sizes and if you are displaying these along side each other you may want them to be the same size as one another, in this case then a width, height set because more ideal. </p> <p>I personally prefer padding but again if you want all buttons the same size then manually set these.</p> <p>By the way the way you shouldn't need to use height:18px, or Width:0; Just delete these values and set the padding to control these and use a span within the button.</p> <p>Example:</p> <pre><code>&lt;p&gt;Simple - One Button&lt;/p&gt; &lt;div class="button"&gt;&lt;span&gt;A Button&lt;/span&gt;&lt;/div&gt; &lt;p&gt;3 Simple Buttons with Float Elements&lt;/p&gt; &lt;div class="button floatleft"&gt;&lt;span&gt;A Button&lt;/span&gt;&lt;/div&gt; &lt;div class="button floatleft"&gt;&lt;span&gt;A Button&lt;/span&gt;&lt;/div&gt; &lt;div class="button floatleft"&gt;&lt;span&gt;A Button&lt;/span&gt;&lt;/div&gt; &lt;div class="clearfix"&gt; &lt;/div&gt; p {padding:15px 5px;} .button {position:relative;transition:padding .5s ease;padding:5px;} .button.floatleft {float:left;} .button span:hover {padding:5px 20px 5px;} .button span {background:#ccc;padding:5px;color:white;} .clearfix {clear:both;} </code></pre> <p>Here's something I made 5mins ago to show you: <a href="http://jsfiddle.net/yrgnW/" rel="nofollow">JsFiddle</a></p> <p>Hope this helps.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload