Перейти к содержимому

Форум ZiSMO.biz


Купить ссылку здесь
Фотография

КНОПКА КУПИТЬ СМЕСТИЛАСЬ НА КАРТОЧКИ ТОВАРА

Форум ZiSMO.biz
карточка товара
3
Сообщений в теме: 3

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 8ч 11м
0

Здравствуйте. Дело в том, что при вёрстке карточки товара кнопка купить смещается левее и я не пойму в чём дело. Код:

 

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>TEST.COM</title>
<link href="source/style.css" type="text/css" rel="stylesheet"/> 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js "></script>
</head>
<body>
<div class="header">
<div class="container clearfix">
<h1 id="logo">TEST.COM</h1>
<nav>
<a href="#">Главная</a>
<a href="#">Контакты</a>
<a href="#">Поддержка</a>
</nav>
</div>
</div>  




<div class="container">


<ul id="choice" class="choice">
<li class="choice-item choice-active" data-choice="all">Все</li>
<li class="choice-item" data-choice="broom">Test1</li>
<li class="choice-item" data-choice="stool">Test2</li>
<li class="choice-item" data-choice="pail">Test3</li>
</ul>






<div class="row">


<div class="product" data-category="broom">
<img class="product-img" src="source/img/test.jpg" alt="#">
<h3 class="product-name">ТЕСТ 1</h3>
<p class="product-cost">₽ 499</p>
<a href="#" class="button">Купить</a>
</div>
<div class="product" data-category="broom">
<img class="product-img" src="source/img/test2.jpg" alt="#">
<h3 class="product-name">ТЕСТ 2</h3>
<p class="product-cost">₽ 499</p>
<a href="#" class="button">Купить</a>
</div>
</div>
</div>
<script src="source/script.js"></script>
</body>
</html>
body{
font-family: 'Yanone Kaffeesatz', sans-serif;
padding-top:  100px;
} 
* {
  margin: 0;
} 


.header {
cursor: context-menu;
width: 100%;
height: 77px;   /*шапка верт.*/
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: auto;  /*z-index: 999;*/
background-color: #3b8dbd;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
transition: height 0.3s;
}
.header h1#logo {
margin-top: -37px; 
display: inline-block;
float: left;
margin-left: 1px;
padding-left: 1px;
font-size: 60px;
color: white;
font-weight: 400;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
transition: all 0.3s;
}
.header nav {
display: inline-block;
float: right;
margin-right: 100px;  
margin-top: -80px;        /*Главная контакты поддержка*/
}
.header nav a {
line-height: 150px;
margin-left: 20px;
color: #9fdbfc;
font-weight: 700;
font-size: 18px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
transition: all 0.3s;
}
.header nav a:hover {
color: white;
}


.container{
  max-width: 960px;
  margin: 3rem auto;
}




.choice{
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  /*flex-direction: row;*/
  justify-content: center;


}


.choice-item{
  padding: .4rem 1rem;
  border: 1px solid black;
  margin-right: 1rem;
  cursor: pointer;
}


.choice-item:last-of-type{
  margin-right: 0;
}


.choice-active{
  background-color: olive;
  color: white;
}


.row{
  display: flex;
  flex-wrap: wrap;
}




.product{
 width: 33.333%;
padding: 1rem;
justify-content: center;
}


.product-img{ 
display: block;
width: 80%;
/*height: auto;*/
}


.product-name{
  text-align: center;
}


/*.product-description{
  text-align: center;
}*/


.product-cost{
  color: blue;
  font-size: 2rem;
  text-align: center;
  margin-top: 0;
}
/*купить*/
.button{
 text-align: center;
 display: flex;
 transform: translate(-50%, -50%);
 width: 200px;
 height: 60px;
 text-align: center;
 line-height: 60px;
 color: #fff;
 font-size: 24px;
 text-transform: uppercase;
 text-decoration: none;
 box-sizing: border-box;
 background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
 background-size: 400%;
 border-radius: 30px;
 z-index: 1;
 justify-content: center;
}
a:hover
{
 animation: animate 5s linear infinite;
}
@keyframes animate
{
 0%
 {
  background-position: 0%;
 }
 100%
 {
  background-position: 400%;
 }
}
a:before
{
 content: '';
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 z-index: -1;
 background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
 background-size: 400%;
 border-radius: 40px;
 opacity: 0;
 transition: 0.5s;




}
a:hover:before
{


 filter: blur(20px);
 opacity:1;
 animation: animate 5s linear infinite;
}

Заранее спасибо за помощь.

 


    • 0
  • Наверх

Поделиться этим:

OFFLINE Отправлено

Dinver
Постоянный
  • Онлайн:35д 17ч 12м
30

Удали в классе:

.button {
transform: translate(-50%, -50%);
}

    • 0
  • Наверх

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 8ч 11м
0

 

Удали в классе:

.button {
transform: translate(-50%, -50%);
}

Я удалял. При наведении на кнопку такая дичь начиналась


    • 0
  • Наверх

Рекламный пост

OFFLINE Отправлено

Leongram
Premium plus
  • Онлайн:41д 1ч 44м
100

*
Популярное сообщение!

Lеongram.com  - бесплатная программа для раскрутки в instаgram. Одобрено форумом ZiSMO.

 

Плюсы: Привлекает только живых подписчиков // Увеличивает активность профиля // Instagram не банит // Повышает продажи

 

post-132540-0-27634700-1554372735.png

 

Функции: Подписка // Отписка // Лайкинг // Автопостинг // Планировщик // Отмечалка по фото // Чистка от ботов // Сбор аудитории

[Скачать бесплатно]

 

Функций больше, чем в других программах ++ Пользуйтесь бесплатно без ограничений по времени ++ Можно не оставлять компьютер включенным. 


Сообщение отредактировал Zismo-Support: 04 04 2019 - 13:13

Изображение
    • 57
  • Наверх

OFFLINE Отправлено

Dinver
Постоянный
  • Онлайн:35д 17ч 12м
30

 

 

Удали в классе:

.button {
transform: translate(-50%, -50%);
}

Я удалял. При наведении на кнопку такая дичь начиналась

 

a:before
{
 position: absolute;
}

тоже удалить


    • 1
  • Наверх