Bg странно работает?

Question

[Idwln]

Вообщем есть у меня 2 кнопки: одна хорошая одна плохая. Для двух кнопок код абсолютно одинаков(не считая цветов), но почему то вокруг второй кнопки backround строится не по середине. Код первой кнопки:

.countainer-block__contact-button {
	display: inline-block;
	width: 172px;
	height: 58px;
	background: #F78434;
	border-radius: 29px;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #FFFFFF;
	margin-right: 20px;
}
.contact-button__text{
	display: inline-block;
	padding-left: 41px;
	padding-top: 18px;
}

Код второй:

.countainer-block__watch-now-button {	
	background: #FFFFFF;
	border-radius: 29px;
	display: inline-block;
	width: 172px;	
	height: 58px;
	font-weight: 700;
	line-height: 24px;
	font-size: 16px;
	
}
.contact-button__text-now-button{
		color: #323232;
	display: inline-block;
	padding-left: 41px;
	padding-right: 21px;
	
}

Вид:

Comments

[Ankhena]

Хотелось бы знать, как bg связан с выравниванием текста внутри кнопки...
Впрочем вопросов на самом деле больше.
Например, зачем для каждой кнопки по два селектора, когда достаточно одного?
Какая вообще разметка?
И почему это кнопки, а не ссылки?

Но черт с ними с вопросами.
Короче:
делаете две кнопки (вероятнее ссылки)
задаете каждой по два класса
в первом, одинаковом для обеих, пишете одинаковые свойства
во втором, классе-модификаторе, разном для разного вида кнопок, пишете отличающиеся свойства типа цветов.

Можете воспользоваться кастомными свойствами.

[goshaLoonny]

Вопрос, почему код кнопок одинаковый за исключением цветов? Вас не смущает что у одной 10 свойств, а у другой 8? Если предполагается что кнопки будут одинаковыми, то обычно для них делают один класс, а цвет уже добавляется другим классом. Либо указываются дефолтные цвета а потом уже переопределяются при необходимости.
То есть вместо .countainer-block__contact-button и .countainer-block__watch-now-button можно было сделать общий класс .countainer-block__btn, а еще лучше не привязывать эту кнопку к конкретному блоку и сделать просто класс .btn