Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

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

.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;

 

Screenshot_7.png

Link to post
Share on other sites

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;

 

Screenshot_7.png


.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;
}

Link to post
Share on other sites

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

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

Edited by florapraktik
Link to post
Share on other sites

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

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

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

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

Link to post
Share on other sites

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

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

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

 

Link to post
Share on other sites

 

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

Также нужно вставить 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%;
	}
}

 

Screenshot_8.png

Link to post
Share on other sites

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%;
	}
}

 

Screenshot_8.png

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

 

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

image.png.58fb12fe223a59dd8ccefb5f463f2284.png

Edited by Maklaosdelay
  • +1 1
Link to post
Share on other sites

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

Edited by Mayklis
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.