Я делаю некоторые стили, и мои кнопки добавления в корзину выглядят нормально, но я пытаюсь создать круглые кнопки для своих списков желаний, а за ними все еще вижу серый цвет. Я думаю, что это может быть стиль браузеров по умолчанию, но я не уверен, кто-нибудь когда-нибудь видел что-то подобное?

Большая кнопка «добавить в корзину» выглядит идеально. Это так странно, вот мой код и картинка

.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
}

enter image description here

1
user127181 30 Июн 2014 в 07:22

2 ответа

Лучший ответ

Через .wishlist

Вставить:

border:0;

Если вы хотите, чтобы он исчез.

P.S: У вас есть border: 1px solid #8bb43f; для другой кнопки, которая также подойдет для этого!

JSFiddle

2
Community 20 Июн 2020 в 09:12

Здесь я сделал образец, используя тег a, а также элемент button. Взгляните на ДЕМО .

/*---------------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;
}
0
Kheema Pandey 30 Июн 2014 в 05:46