css style <button> shows grey background - css

Question

I'm styling some and my add to cart buttons look fine but I'm trying to create circular buttons for my wish lists and I'm still seeing grey behind them. I'm thinking this might be the browsers' default styling taking over but I'm not sure, has anyone ever seen something like this?
The larger "add to cart" button looks perfect. It's so weird, here's my code and a pic
.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

In .wishlist
Insert:
border:0;
If you want it to disappear.
P.S: You had border: 1px solid #8bb43f; for the other button, which would also work fine for this!
JSFiddle

Answer 2

Here I've made a Sample using a tag and as well using button element. Please have a look at the 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;
}