Где в моем CSS этот набор цветов фона?

Question

Как вы можете видеть на моем сайте Trolleyy.com Я пытаюсь скопировать стиль кнопки темы для своей электронной почты из кнопки «Перейти к магазину». Проблема в том, что я столько, сколько я пытался скопировать css, проверяя его, он по-прежнему выглядит совершенно другим. Я попытался добавить важное правило, не имеющее никакого фона, но это также устранило границы.

Кто-нибудь знает, как либо:

A) Скопируйте весь CSS стиль этой кнопки или

B) Знать, как я могу изменить кнопку от серого до прозрачного фона

As вероятно, очевидно, что я учу стилю в CSS, и это действительно поможет мне! Я часами играю с разными идеями. Благодарю.

Answer 1

Попробуйте добавить этот код в ваш CSS:

#mc-embedded-subscribe { 
    background: transparent; 
    border-width: 2px!important; 
    border-style: solid!important; 
} 


#mc-embedded-subscribe:hover { 
    background: #fff; 
} 

После добавления этого кода, ваша форма должна выглядеть примерно так:

Answer 2

Похоже, они две очень разные элементы. Один из них - input type=submit, а другой - anchor. Это означает, что просто копирование классов CSS может не работать из-за других сложных правил, связанных с конкретными элементами.

При осмотре вашего сайта, похоже, что вам нужно будет определить некоторые правила для input#mc-embedded-subscribe.button или обновите правила в #optin input[type="submit"]. Я просто поиграл с первым и смог повернуть красную кнопку. Что-то в вашем стеке CSS также выключая границы с !important, так что единственным способом получить границу на кнопке, чтобы повторно применить настройки границ также с !important.

Я сделал это правило и получил кнопку в соответствии с Go кнопку, чтобы магазин:

input#mc-embedded-subscribe.button { 
    background-color: transparent; 
    border: 2px solid #fff !important; 
} 

сложность вашего CSS делает его трудно обеспечить более общего назначения, решение, хотя, пожалуй, действительно существует.

Общая рекомендация состоит в том, чтобы избежать слишком большого использования модификатора !important, поскольку он может очень затруднить отладку CSS. Если слишком много вещей важно, то ни один из них на самом деле.

Answer 3

Попробуйте следующее на кнопку «Subscribe»:

.button-clear { 
    background-color: transparent; 
    backface-visibility: hidden; 
    border-color: rgb(255, 255, 255) !important; 
    border-radius: 0px !important; 
    border-style: solid !important; 
    border-width: 2px !important; 
    border-image-outset: 0px !important; 
    border-image-repeat: stretch !important; 
    border-image-slice: 100% !important; 
    border-image-source: none !important; 
    border-image-width: 1 !important; 
    color: rgb(255, 255, 255) !important; 
} 

.button-clear:hover { 
    background-color: #ffffff !important; 
    color: #333333 !important; 
} 

Пожалуйста Примечание: Я настоятельно советую пытаться избегать использования !important