无法让css按钮正确显示

Question

使用Bootstrap 3并尝试在getbootstrap网站主页上看到一个简单的透明按钮。使用下面的代码给我默认的bootstrap按钮外观与背景中的渐变而不是我想要的外观。我无法弄清楚我做错了什么。这是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小提琴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;
}