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

assets/css/gp-style-core.css

@@ -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;

assets/css/gp-style-desktop.css

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