css样式<button>显示灰色背景</button>

Question

我设置了一些样式并且我的添加到购物车按钮看起来很好，但我正在尝试为我的愿望清单创建圆形按钮，我仍然看到它们背后的灰色。我认为这可能是浏览器＆＃39;默认样式接管，但我不确定，有没有人见过这样的东西？

较大的＆＃34;加入购物车＆＃34;按钮看起来很完美它太奇怪了，这是我的代码和图片

.button {
    color: #fff;
    background: #a4cd45;
    border: 1px solid #8bb43f;
    padding: 10px 20px;
    font-size: 135%;
    margin: 0 auto;
    transition: background 0.2s cubic-bezier(0.86, 0, 0.07, 1);
    border-radius: 4px
}
a.button:hover {
    background: #8B0204;
    border-color: #8B0204;
    color: white
}
.wishlist {
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 40px;
    color: white;
    background-color: #a4cd45;
    text-align: center;
    margin: 17px 10px 0 0;
    position: relative;
    z-index: 2;
    font-size: 90%;
    cursor: pointer;
    float:right
}

Answer 1

在.wishlist

插入：

border:0;

如果你想让它消失。

P.S：你有另一个按钮的border: 1px solid #8bb43f;，这也适用于此！

JSFiddle

Answer 2

我已使用a标记制作了一个示例，并使用button元素制作了示例。请查看 DEMO 。

/*---------------Using Button Element-------------------*/

button.wishlist{
   background-color: #a4cd45;
   border-radius:50%;
   height: 40px;
   width: 40px;
   border:0;/*If remove this property you will see a gray background as shows on image*/
   color: rgba(255, 255, 255, 0);
   display:block;
   margin: 17px 10px 0 0;
   position: relative;
   outline:0;
  cursor:pointer; /*Give an Effect of Clickable*/
}
button.wishlist:hover:before{ text-shadow: 1px 1px 1px #ef8913; }

button.wishlist:before {
    content: "\f08a";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    position: absolute;
    top: 12px;
    left: 10px;
}

/*---------------Using anchor Element-------------------*/

 a.wishlist{
   background-color: #a4cd45;
   border-radius:50%;
   height: 40px;
   width: 40px;
   border:0;
   color: rgba(255, 255, 255, 0);
   display:block;
   margin: 17px 10px 0 0;
   position: relative;
   z-index: 2;
   font-size: 90%;
   cursor: pointer;
   float:right;
}
a.wishlist:hover:before{ text-shadow: 1px 1px 1px #ef8913;}

a.wishlist:before {
    content: "\f08a";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    position: absolute;
    top: 12px;
    left: 10px;
}