更改字體大小的按鈕瓦特/骷髏網格

Question

我有困難使字體在骨架網格內的按鈕內放大。如何在不使按鈕本身變大的情況下製作字體大小？任何幫助表示讚賞。

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

你可以做到這一切與填充！經驗法則，你絕不應該把高度放在任何東西上（有些情況很少）。您可以使用填充輕鬆控制高度和寬度，使您的內容保持正確。把它想象成從內部向外擴大。

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