AbuMariam AbuMariam - 5 months ago 10
CSS Question

Trimming the fat from an HTML button created using div

I have a link which I want to appear as a button. Below is the code for it where I wrapped the href in a div. Problem is the button appears too "fat". How can I make the red around the text less?

I tried reducing the width of the div but that just makes the text to wrap.



<div style="width: 100px;background-color:#cc0000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;padding: 10px; padding-bottom: 20px">
<a href="" class="font-regular" style="font-size: 14px; font-family: 'Arial Regular', Arial; color: white; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px;padding: 6px 18px;">
Just do it!
</a>
</div>





UPDATE

What I am asking is the ratio of text to background color red should be similar to the button shown in this screenshot http://grab.by/RdFa.

Answer

Now its ok, just adjust the padding and width.

<div style="width: 80px;background-color:#cc0000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;padding: 5px;">
     <a href="" class="font-regular" style="font-size: 14px; font-family: 'Arial Regular', Arial; color: white; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px;padding: 6px;">
                                    Just do it!
     </a>
 </div>