如何更改按钮样式

Question

我想更改按钮https://www.addevent.com

的样式

到这种风格

按钮的css代码是

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

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

Fiddler链接为https://jsfiddle.net/wu7L8ct9/2/

Answer 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样式