сделал эффекты button

fitness
Kirill Pet 8 months ago
parent dec1a3b62a
commit 9fc5e1cb5f
  1. 36
      assets/css/gp-style-core.css
  2. 2
      assets/css/gp-style-desktop.css
  3. 8
      index.html

@ -75,16 +75,23 @@ body{
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(17, 17, 20, .8);
z-index: 100;
display: none;
pointer-events: none;
transition: opacity .3s;
opacity: 0;
}
.modal.active{
display: flex;
justify-content: center;
align-items: center;
pointer-events: auto;
opacity: 1;
}
.modal__item{
@ -194,6 +201,9 @@ body{
border-radius: 4px;
transition: background-color .3s;
background-color: rgba(17, 17, 20, 0);
cursor: pointer;
}
.btn-big--border{
padding: 21px 32px;
@ -203,12 +213,30 @@ body{
.btn-big--border--blood{
border-color: var(--blood);
}
.btn-big--border--blood:hover{
background-color: var(--red);
}
.btn-big--border--blood:active{
background-color: var(--blood);
}
.btn-big--border--white{
border-color: var(--text-white);
}
.btn-big--border--white:hover{
background-color: var(--background-grey-hover);
}
.btn-big--border--white:active{
background-color: rgba(17, 17, 20, 0);
}
.btn-big--blood{
background-color: var(--blood);
}
.btn-big--blood:hover{
background-color: var(--red);
}
.btn-big--blood:active{
background-color: var(--blood);
}
.btn-big--social{
padding-right: 66px;

@ -128,6 +128,8 @@
overflow: hidden;
border: none;
cursor: pointer;
}
.header-menu__search.active .header-menu-search__open img:first-child{
display: none;

@ -76,9 +76,9 @@
</a>
</div>
<div class="header-main__item">
<a href="" class="btn-big btn-big--border btn-big--border--blood header-main__btn">
<button href="" class="btn-big btn-big--border btn-big--border--blood header-main__btn">
Заказать звонок
</a>
</button>
<a href="" class="btn-big btn-big--blood header-main__btn">
спецификация
</a>
@ -1092,7 +1092,7 @@
</footer>
<div class="modal">
<div class="modal__item">
<div class="modal__item modal-project">
<p class="title-1">
Получи проект бесплатно
</p>
@ -1146,7 +1146,7 @@
</form>
</div>
<div class="modal__item">
<div class="modal__item modal-call">
<p class="title-1">
Обратный звонок
</p>

Loading…
Cancel
Save