Эффекты кнопок CSS не работают в браузерах

Richard Moushe

Возникло несколько проблем с эффектами кнопок CSS, которые не работали в браузерах. Он отображается так, как мне хотелось бы, в Chrome, но не в Firefox. Кажется, не могу найти корень проблемы. Вот что у меня есть. скрипка

 a.soft {display: inline-block;font-family:'Varela Round', sans-serif;padding:2rem3rem;font-size:1.25vw;box-shadow:-10px-10px20px0#E6E6E6,10px10px20px0#ABABAB, inset 10px10px20px0#E6E6E6, inset -10px-10px20px0#ABABAB;border-radius:50px;transform: box-shadow 1s ease-in-out;background-color:#666666;-webkit-background-clip: text;color: transparent;text-shadow: rgba(245,245,245,1.0)2px2px5px;font-weight: bolder;}

a.soft:hover {background-color:#ddd;box-shadow:-10px-10px20px0#E6E6E6,10px10px20px0#ABABAB, inset 10px10px20px0#E6E6E6, inset -10px-10px20px0#ABABAB;color:#888;}

a.soft:active {box-shadow:0020px0#E6E6E6,0020px0#ABABAB, inset 0020px0#E6E6E6, inset 0020px0#ABABAB;color:#D8D8D8;text-shadow:1px1px2px white;-webkit-background-clip: text;font-weight: bolder;}

Код (разметка):

 <a class="soft">Button</a>

Код (CSS):

Vobundino

Похоже, вам нужно добавить немного пробелов. Например, Firefox должен понимать следующий синтаксис:

 padding:2rem3rem;

Код (CSS): но нет

 padding:2rem 3rem;

Код (CSS):

Manon Lescaut

спасибо обоим. Я исправил то, что вы рекомендовали. Это сработало отлично после добавления специального правила Firefox: @-moz-document url-prefix() { a.soft { цвет фона: #ddd; box-shadow: -10px -10px 20px 0 #E6E6E6, 10 пикселей 10 пикселей 20 пикселей 0 #ABABAB, вставка 10 пикселей 10 пикселей 20 пикселей 0 #E6E6E6, вставка -10px -10px 20px 0 #ABABAB; цвет: #888; } }

Похожие темы	Дата
Какой оптимальный размер и стиль шрифта должен быть на сайте?	19.12.2024, 05:12
CSS для Textarea с макетом в стиле консоли	19.12.2024, 05:12
Total Noob - Имиджевая реклама	19.12.2024, 05:12
Ссылка не активна в Chrome, но работает нормально с Firefox	19.12.2024, 05:12
Помогите выровнять различный текст с помощью CSS	19.12.2024, 05:12
Джумла Помогите! Администратор пользователей, зарегистрированный контент	19.12.2024, 05:12
Интерфейс крошечного mce не работает	19.12.2024, 05:12
Как сделать макет списка книг более привлекательным?	19.12.2024, 05:12
Как в команде «Переформатировать код» PhpStorm использовать только пробелы?	19.12.2024, 05:12
Ищу совет по созданию блога	19.12.2024, 05:12

Эффекты кнопок CSS не работают в браузерах

Richard Moushe

Vobundino

Manon Lescaut

I AM

Интересно