在按钮w / Skeleton网格中更改字体大小

时间:2014-04-02 03:44:53

标签: css skeleton-css-boilerplate

我很难在骨架网格内的按钮内使字体变大。如何在不使按钮本身更大的情况下制作字体大小?任何帮助表示赞赏。

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;
}

1 个答案:

答案 0 :(得分:4)

你可以用填充来完成所有这些!

经验法则,你不应该把高度放在任何东西上(有些情况下很少)。您可以使用填充轻松控制高度和宽度,使您的内容正确。可以把它想象成从内部向外发展。

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;
    }