html - 无法让 css 按钮正确显示

Question

使用 Bootstrap 3 并尝试在 getbootstrap 网站主页上获得一个简单的透明按钮。使用下面的代码给我默认的引导按钮外观，背景中有渐变，而不是我想要的外观。我不知道我做错了什么。这是 CSS:

.btn-outline{color:#540300;background-color:transparent;border-color:#540300;}
.btn-outline:hover,.btn-outline:focus,.btn-outline:active{color:#fff;background-color:#540300;border-color:#333;}

和我的 HTML:

<a href="#" class="btn btn-lg btn-outline" role="button">Test Button</a>    

Answer 1

修订后的 JS Fiddle Revised fiddle

    .btn {
  -webkit-border-radius: 10;
 -moz-border-radius: 10;
  border-radius: 10px;
  font-family: Calibri;
  color: #594080;
  font-size: 20px;
  background: #ffffff;
  padding: 10px 20px 10px 20px;
  border: solid #594080 1px;
  text-decoration: none;
}

.btn:hover {
  background: #594080;
 text-decoration: none;
  color: white;
}