css - 展开或收缩按钮图像以适合文本

Question

我正在创建一个 moodle 主题，并且我有一个按钮图像，我需要将其用于我的导航链接，但似乎无法弄清楚如何扩展和收缩按钮图像以适应链接文本

.headingblock {
    padding-bottom:1px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px; /*background: none repeat scroll 0 0 #8d969c;*/
    font-size:12px !important;
    background: url([[pix:theme|top-nav-link1]]) no-repeat;
}

h2.headingblock {
    background-color:#8d969c;
}

Answer 1

.headingblock input[type="button"]{
    background-image:url([[pix:theme|search_button_bg3]]) !important;
background-color:#8d969c;
    background-color:#fff;
    border-radius:0;
    padding: 0px 0px 0px 5px;
    margin: 0px;
    border: none;
    height: 20px;
    width: 58px;
    font-weight:bold;
    font-size:13px;
}