如何更改按钮样式答案

【问题标题】：how to change the button style如何更改按钮样式
【发布时间】：2017-03-16 00:04:53
【问题描述】：

我想改变按钮的样式

到这种风格

我的按钮css代码是

#login{
    border: 1px solid black;
    width: 5%;
    text-align: center;
    margin-left: 1000px;
}

【问题讨论】：

好吧...？添加一些圆形边缘，使其更小，更改字体，就完成了。如果不是“有人为我做这件事”，这里的问题是什么？
#login{ 边框：1px 纯黑色；宽度：5%；文本对齐：居中；填充：5px 15px；边框半径：3px； }
如果您了解一些 CSS，则可以轻松实现。您在这里分享的 CSS 有点复杂，我认为您项目样式表中设置的默认样式也会影响它。
@Dev-stud 如何减小它仍然看起来很大的尺寸

标签： html css

【解决方案1】：

#login{
    border: 1px solid black;
    width: 5%;
    text-align: center;
		padding: 5px 15px;
		border-radius: 3px;
}

&lt;div id="login"&gt;login&lt;/div&gt;

【讨论】：

按钮看起来还是很大如何减小尺寸
您可以将padding: 5px 15px 缩减为padding: 3px 11px 等等。您也可以添加font-size: 11px 属性

【解决方案2】：

<div id="login">login</div>

#login{
  display:inline-block;
    border: 1px solid black;
    text-align: center;
    padding: 4px 15px;
    border-radius: 3px;
}

提琴手链接是https://jsfiddle.net/wu7L8ct9/2/

【讨论】：

【解决方案3】：

最好使用类选择器将样式应用于您的按钮

<button class="login-btn">Login</button>

您可以使用这种样式来获得想要的结果

.login-btn {
  font-family: sans serif;
  font-size: 13px;
  background: transparent;
  padding: 8px 20px;
  border: 1px solid #000;
  border-radius: 3px;
}

尽量避免在你的 btn 样式中使用这个 css 属性 width: 5%; margin-left: 1000px; 每个页面组件都必须封装 CSS 样式

【讨论】：