Как изменить цвет по отдельности кнопок "В корзину","В закладки","В сравнение" в товарах на другой цвет?

[Mayklis]

Знаю как поменять цвет на все кнопки вместе, но как разделить и поменять по отдельности?

В коде пишет про групы кнопок

.product-thumb .button-group button {
    width: 60%;
    border: none;
    display: inline-block;
    float: left;
    background-color: #eee;
    color: #888;
    line-height: 38px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;

 

[Maklaosdelay]

44 минуты назад, Mayklis сказал:

Знаю как поменять цвет на все кнопки вместе, но как разделить и поменять по отдельности?

В коде пишет про групы кнопок

.product-thumb .button-group button {
    width: 60%;
    border: none;
    display: inline-block;
    float: left;
    background-color: #eee;
    color: #888;
    line-height: 38px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;

 

.product-thumb .button-group button:nth-child(1) {
    background-color: red;
}

.product-thumb .button-group button:nth-child(2) {
    background-color: green;
}

.product-thumb .button-group button:nth-child(3) {
    background-color: blue;
}

[florapraktik]

Добавьте этим кнопкам дополнительные классы. Либо готовые бутстрапа, либо свои.

Когда у каждой кнопки будет свой собственный класс, сможете раскрашивать её как угодно.

Змінено 1 травня 2018 користувачем florapraktik

[SiteMix]

17 минут назад, florapraktik сказал:

Добавьте этим кнопкам дополнительные классы. Либо готовые бутстрапа, либо свои.

Когда у каждой кнопки будет свой собственный класс, сможете раскрашивать её как угодно.

А чем решение выше не устраивает?

[florapraktik]

30 минут назад, SiteMix сказал:

А чем решение выше не устраивает?

А я не спорю, я дополняю

 

[Mayklis]

 

Добавил, но работает только на первой и третей кнопке(делал пример других кнопок также само было(брало первую и последнюю))

Также нужно вставить hover, еще не експерементировал где, в бутрустрап или стайлшит ставить? сылка на кнопки(дефолтна тема): http://rizono.com/hewlett-packard

Взял часть кода где вставил разделители:

.product-thumb .button-group {
	border-top: 1px solid #ddd;
	background-color: #eee;
	overflow: auto;
}
.product-list .product-thumb .button-group {
	border-left: 1px solid #ddd;
}
@media (max-width: 768px) {
	.product-list .product-thumb .button-group {
		border-left: none;
	}
}
.product-thumb .button-group button {
	width: 60%;
	border: none;
	display: inline-block;
	float: left;
	background-color: #eee;
	color: #888;
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
.product-thumb .button-group button:nth-child(1) {
    background-color: green;
	color: white;
}

.product-thumb .button-group button:nth-child(2) {
    background-color: red;
}

.product-thumb .button-group button:nth-child(3) {
    background-color: blue;
}
.product-thumb .button-group button + button {
	width: 20%;
	border-left: 1px solid #ddd;
}
.product-thumb .button-group button:hover {
	color: #444;
	background-color: #ddd;
	text-decoration: none;
	cursor: pointer;
}
@media (max-width: 1200px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
@media (max-width: 767px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}

 

[Maklaosdelay]

10 часов назад, Mayklis сказал:

 

Добавил, но работает только на первой и третей кнопке(делал пример других кнопок также само было(брало первую и последнюю))

Также нужно вставить hover, еще не експерементировал где, в бутрустрап или стайлшит ставить? сылка на кнопки(дефолтна тема): http://rizono.com/hewlett-packard

Взял часть кода где вставил разделители:

.product-thumb .button-group {
	border-top: 1px solid #ddd;
	background-color: #eee;
	overflow: auto;
}
.product-list .product-thumb .button-group {
	border-left: 1px solid #ddd;
}
@media (max-width: 768px) {
	.product-list .product-thumb .button-group {
		border-left: none;
	}
}
.product-thumb .button-group button {
	width: 60%;
	border: none;
	display: inline-block;
	float: left;
	background-color: #eee;
	color: #888;
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
.product-thumb .button-group button:nth-child(1) {
    background-color: green;
	color: white;
}

.product-thumb .button-group button:nth-child(2) {
    background-color: red;
}

.product-thumb .button-group button:nth-child(3) {
    background-color: blue;
}
.product-thumb .button-group button + button {
	width: 20%;
	border-left: 1px solid #ddd;
}
.product-thumb .button-group button:hover {
	color: #444;
	background-color: #ddd;
	text-decoration: none;
	cursor: pointer;
}
@media (max-width: 1200px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
@media (max-width: 767px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}

 

зашел я на ваш сайт, в консоли девелопера побаловался, нашел какойто лишний символ (в консоли отображается как красная точка) попробуйте удалить

 

без него всё ок

Змінено 2 травня 2018 користувачем Maklaosdelay

[Mayklis]

Да, это оно, я видел это и думал все Ок, удалил всю строку(была пуста) и заработало. Большое спасибо Maklaosdelay и все кто участвовал!

Змінено 2 травня 2018 користувачем Mayklis