сделал эффекты button
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user