сделал эффекты 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; height: 100vh;
width: 100%; width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(17, 17, 20, .8); background-color: rgba(17, 17, 20, .8);
z-index: 100; z-index: 100;
display: none; pointer-events: none;
transition: opacity .3s;
opacity: 0;
} }
.modal.active{ .modal.active{
display: flex; pointer-events: auto;
justify-content: center;
align-items: center; opacity: 1;
} }
.modal__item{ .modal__item{
@ -194,6 +201,9 @@ body{
border-radius: 4px; border-radius: 4px;
transition: background-color .3s; transition: background-color .3s;
background-color: rgba(17, 17, 20, 0);
cursor: pointer;
} }
.btn-big--border{ .btn-big--border{
padding: 21px 32px; padding: 21px 32px;
@ -203,12 +213,30 @@ body{
.btn-big--border--blood{ .btn-big--border--blood{
border-color: var(--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{ .btn-big--border--white{
border-color: var(--text-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{ .btn-big--blood{
background-color: var(--blood); background-color: var(--blood);
} }
.btn-big--blood:hover{
background-color: var(--red);
}
.btn-big--blood:active{
background-color: var(--blood);
}
.btn-big--social{ .btn-big--social{
padding-right: 66px; padding-right: 66px;

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

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

Loading…
Cancel
Save