Как изменить цвет кнопки в CSS, если даже !important не помогает?

Question

[Антон Романов]

Учусь разработке и столкнулся с такой проблемой. Прописываю правило к кнопке - все работает, кроме 2-3 вещей.
Например, не меняется цвет текста и не убирается подчеркивание ссылки в кнопке. Хотя все остальное работает.
Вот ссылка на песочницу.

.btn {
  border: 0px solid #000000;
  width: 160px;
  color: #ffffff; /* The color of text in button - WHY DOESN'T IT WORK?*/
  text-decoration: none; /* The link style in button - WHY DOESN'T IT WORK?*/
  background: #FBD840;
  padding: 12px;
  text-align: center;
  margin-bottom: 30px;
  border-radius: 3px;
  box-shadow: 0px 3px 15px 3px rgba(249,219,91,0.4);
  cursor: pointer;

Эта ошибка повторяется несколько раз в последнем попапе ((
В чем может быть дело? Помогите пжлст.

Также не меняется цвет текста в плейсхолдере инпута:

input {
  border: 1px solid #E0E0E0;
  color: #000000; /* placeholder color text - WHY DOESN'T IT WORK?*/
  border-radius: 3px;
  padding: 10px;
  font-size: 14px;
  width: 200px;
  margin-top: 10px;
  margin-bottom: 15px; 
}

И еще там же болячка с отступом снизу. Прописываю margin-bottom, но он не работает. Хотя вроде все правильно:

h1 {
  padding-top: 50px;
  margin-bottom: 30px; /* WHY DOESN'T IT WORK?*/
}

Помогите пжлст. Уже устал искать ошибки.

Answer 1

[Ilya Loginov]

Вот по порядку ответы на ваши вопросы:
1. Почему не переопределяется цвет и не убирается подчеркивание:
Это происходит т.к. вы применяете стили к блоку .btn, но внутри есть тег "a", у которого есть стили заданные браузером, чтобы этого избежать сделайте так:

.btn a{
color: #ffffff;
text-decoration: none;
}

2. Не меняется цвет placeholder.
Это происходит по тому что на него не действует color. Подробности и примеры тут
3. Проблема с margin-bottom:
Тут все просто, он работает, попробуйте выставить его в значение 100px и увидите как кнопка опустится.

Comments

[Антон Романов]

Спасибо огромное! Очень круто и подробно все объяснили. Разобрался :)

Answer 2

[dicem]

Что касается этого:

btn {
border: 0px solid #000000;
width: 160px;
color: #ffffff; /* The color of text in button - WHY DOESN'T IT WORK?*/
text-decoration: none; /* The link style in button - WHY DOESN'T IT WORK?*/
background: #FBD840;
padding: 12px;
text-align: center;
margin-bottom: 30px;
border-radius: 3px;
box-shadow: 0px 3px 15px 3px rgba(249,219,91,0.4);
cursor: pointer;

Селектор! Если вы имели ввиду класс btn, то класс обозначаем в таком формате: .btn{...}
Если же вы имели ввиду сам тег , то писать нужно полное название тега
button{...}

Если я чего то не понял, то давайте ка ссылку на песочницу свою

Comments

[Антон Романов]

Неправильно скопировал селектор в теме вопроса. На самом деле прописал ".btn". Вот песочница https://codepen.io/a007mr/pen/MzBWdE.