Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Big Green Button

Big Green Button

Big Green Button

Problem

I am trying to make a large button with 2 lines of text that looks something like:

What I want

This is my current JSFiddle showing what I've "accomplished"

I am fairly new to asp.net and programming in general so excuse my poor CSS.

Thanks for any help that anyone can offer.

The HTML:

Submit a special order request
for information ➧

The CSS:

.bigGreenButton a{
font-family:'TradeGothic LT CondEighteen';
font-size:18px;
background-color:#60a74a;
color:white;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
padding-left:25px;
padding-right:25px;
text-transform:uppercase;
text-decoration:none;
height:auto;
width:auto;
text-align:center;
}

.bigGreenButton a:hover {
 background-color:#cccccc;
}

button {
text-align: center;
padding: 0px 0px 0px 0px;
border: none;
}
Problem courtesy of: Pat D

Solution

Add this to your css:

.bigGreenButton a{
    display: inline-block;
    ...
}

You can see it here.

Solution courtesy of: p.s.w.g

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Big Green Button

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×