Changing font size in button w/ Skeleton grid

Question

I'm having difficulty making the font larger within the button inside skeleton grid. How would I go about making the font-size without making the button itself bigger? Any help is appreciated.

html:

<section class="sixteen columns m-new">
    <a href="#"><button class="btn-new">hey, I'm new!</button></a>
</section>

CSS:

button.btn-new {
    background-color: #F46F80;
    padding: 1em;
    width: 7.3em;
    height: 0em;
    opacity: 0.7;
    border-radius: 0.2em;
    border: 1px solid #C60098;
    font-size: 3em;
}

Answer 1

You can do all of this with padding!

Rule of thumb, you should never put height on anything (there are some cases but few). you can easily control height and width with padding to make your content sit right. Think of it as growing it outwards from the inside.

http://jsfiddle.net/F7XH8/

    button.btn-new {
        background-color: #F46F80;
        padding: .2em .5em; /* Control your width and height here! */
        opacity: 0.7;
        border-radius: 0.2em;
        border: 1px solid #C60098;
        font-size: 3em;
    }