Сообщений в теме: 5

[vanyushka]

Здравствуйте!
Нашел код кнопки "Купить" для сайта, но не понимаю как его вставить в шаблон.
Имеется HTML + CSS код:

HTML:

<div class="button-container">
  <a href="#" class="btn"><span>Click Me</span></a>
</div>

CSS:

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  background-color: #17161e;
}
.button-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn {
  display: block;
  height: 50px;
  width: 186px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: white;
  font-size: 14px;
  text-align: center;
 
  &:after {
	position: absolute;
	content:'';
	display: inline-block;
	background: rgba(59,173,227,1);
	background: linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
	height: 50px;
	width: 372px;
	z-index: -1;
	transform: translateX(-280px);
	transition: transform 400ms ease-in;
  }
 
  &:hover {
	&:after {
	  transform: translateX(-200px);
	}
  }
  span {
	position: relative;
	top: 16px;
  }
}

Аккаунт: SL-230350. Спасибо.

[Cupuyc]

ipodushkin (17 Апрель 2015 - 15:17) писал:

Здравствуйте!
Нашел код кнопки "Купить" для сайта, но не понимаю как его вставить в шаблон.
Имеется HTML + CSS код:

HTML:

<div class="button-container">
<a href="#" class="btn"><span>Click Me</span></a>
</div>

CSS:

body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
background-color: #17161e;
}
.button-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn {
display: block;
height: 50px;
width: 186px;
position: relative;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
color: white;
font-size: 14px;
text-align: center;

&:after {
position: absolute;
content:'';
display: inline-block;
background: rgba(59,173,227,1);
background: linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
height: 50px;
width: 372px;
z-index: -1;
transform: translateX(-280px);
transition: transform 400ms ease-in;
}

&:hover {
&:after {
	 transform: translateX(-200px);
}
}
span {
position: relative;
top: 16px;
}
}

Аккаунт: SL-230350. Спасибо.

Пожалуйста уточните:
1) Куда вы хотели бы установить эту кнопку?
2) По какой причине вы хотите изменить её?(если вы хотите изменить внешний вид, можно отредактировать существующую в соответствии с вашими пожеланиями)

[vanyushka]

Cupuyc (17 Апрель 2015 - 15:42) писал:

Пожалуйста уточните:
1) Куда вы хотели бы установить эту кнопку?
2) По какой причине вы хотите изменить её?(если вы хотите изменить внешний вид, можно отредактировать существующую в соответствии с вашими пожеланиями)

1. Я бы хотел поставить ее заместо стандартной кнопки "Положить в корзину" в карточке товара
2. Меня привлек ее внешний вид. Посмотреть как она выглядит можно по ссылке: http://codepen.io/egrucza/pen/yyWGbN

[Cupuyc]

ipodushkin (17 Апрель 2015 - 15:51) писал:

1. Я бы хотел поставить ее заместо стандартной кнопки "Положить в корзину" в карточке товара
2. Меня привлек ее внешний вид. Посмотреть как она выглядит можно по ссылке: http://codepen.io/egrucza/pen/yyWGbN

1) Данная кнопка будет не адаптивна(при масштабировании страницы её местоположение и работоспособность будут меняться)
2) Возможно вам подойдёт следующий вариант:

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:

.goodsDataFormSubmitButton input[type="submit"] {
background: url('kupi.png');
border: 0px solid white;
border-radius: 4px;
color: white;
height: 40px;
box-shadow: 4px 8px 12px 0px rgba(170, 170, 170, 0.7);

Замените его на:

.goodsDataFormSubmitButton input[type="submit"]:hover {
background: linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 35%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
}
.goodsDataFormSubmitButton input[type="submit"] {
background: linear-gradient(45deg, rgba(59,173,227,1) -5%, rgba(87,111,230,1) 30%, rgba(152,68,183,1) 46%, rgba(255,53,127,1) 95%);
border: 0px solid white;
border-radius: 4px;
color: white;
height: 40px;
box-shadow: 4px 8px 12px 0px rgba(170, 170, 170, 0.7);
}

[vanyushka]

Cupuyc (17 Апрель 2015 - 19:00) писал:

1) Данная кнопка будет не адаптивна(при масштабировании страницы её местоположение и работоспособность будут меняться)
2) Возможно вам подойдёт следующий вариант:

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:

.goodsDataFormSubmitButton input[type="submit"] {
background: url('kupi.png');
border: 0px solid white;
border-radius: 4px;
color: white;
height: 40px;
box-shadow: 4px 8px 12px 0px rgba(170, 170, 170, 0.7);

Замените его на:

.goodsDataFormSubmitButton input[type="submit"]:hover {
background: linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 35%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
}
.goodsDataFormSubmitButton input[type="submit"] {
background: linear-gradient(45deg, rgba(59,173,227,1) -5%, rgba(87,111,230,1) 30%, rgba(152,68,183,1) 46%, rgba(255,53,127,1) 95%);
border: 0px solid white;
border-radius: 4px;
color: white;
height: 40px;
box-shadow: 4px 8px 12px 0px rgba(170, 170, 170, 0.7);
}

Очень хорошо! Спасибо!)

И еще нужна Ваша консультация. Постепенно делаю шапку вот по этому образцу: http://codepen.io/ajerez/pen/zxMQRB
То есть, при загрузке страницы в шапке будет происходить такая анимация на всю ее площадь.
И вот вопрос: можно ли ее будет сделать адаптивной? То есть чтобы и на планшетах, и на других экранах корректно отображалась?
Или может все случиться как с кнопкой?

[Cupuyc]

ipodushkin (17 Апрель 2015 - 19:52) писал:

Очень хорошо! Спасибо!)

И еще нужна Ваша консультация. Постепенно делаю шапку вот по этому образцу: http://codepen.io/ajerez/pen/zxMQRB
То есть, при загрузке страницы в шапке будет происходить такая анимация на всю ее площадь.
И вот вопрос: можно ли ее будет сделать адаптивной? То есть чтобы и на планшетах, и на других экранах корректно отображалась?
Или может все случиться как с кнопкой?

Здравствуйте, могли бы вы уточнить(желательно приложив скриншот), как именно вы хотите видеть шапку в итоговом варианте с этой анимацией?