css - 如何制作我的 ionic 按钮 "slimmer"？

Question

我一直在使用开发人员工具尝试将 ionic 按钮制作成“药丸状”，这样按钮就变窄了。一个接近的例子就像堆栈溢出上的按钮，例如“提问”按钮。文本的顶部和底部没有太多间距。

我怎样才能用我的按钮实现这种效果？这是一个代码笔，显示了我正在尝试修改的按钮:

http://codepen.io/anon/pen/MKPdey

 <button class="button button-small button-calm">
         hello I'm a small button
    </button>

Answer 1

你必须覆盖 padding 和 min-height:

.button.button-small.button-calm {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

这是一个codepan fork

如果仍然不够，请更改line-height:

.button.button-small.button-calm {
  line-height: 100%; /* play with this to fit your needs */
}