Add transition to the tap bar and more hover

Version 2.6.1
Add transition to the tap bar.
Add hover to the footer social networking links.

style.css

@@ -43,6 +43,29 @@
   transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
+.active-ground1{
+  font-family: "Roboto";
+  background-color: var(--our-command-substrate);
+  color: black;
+  border: none;
+  width: 73px;
+  height: 38px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 30px;
+  /* margin-bottom: 30px; */
+  letter-spacing: 6%;
+  border-radius: 4px;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+transition-duration: 250ms;
+transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.active-ground1:hover{
+  background-color: var(--accent-color);
+  color: var(--white);
+}
+
 .active-now:hover {
   background-color: var(--accent-color-hover);
 }
@@ -140,7 +163,8 @@ footer{
   font-size: 16px;
   font-weight: 700;
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
-  transition: background-color 0.3s ease, transform 0.3s ease;
+  transition-property: background-color, transform;
+  transition-duration: 250ms;
   /* line-height: 30px; */
   /* margin-bottom: 30px; */
   /* letter-spacing: 6%; */
@@ -153,6 +177,7 @@ footer{
 
 .button-order:hover {
   background-color: var(--accent-color-hover);
+  transform: cubic-bezier(0.4, 0, 0.2, 1); 
 }
 
 .webstudio {
@@ -207,10 +232,13 @@ footer{
   letter-spacing: 6%;
   border-radius: 4px;
   transition: background-color 0.3s ease, transform 0.3s ease;
+transition-duration: 250ms;
+transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .active-ground:hover {
-  background-color: var(--our-command-substrate-hover);
+  background-color: var(--accent-color);
+  color: var(--white);
 }
 
 .active {
@@ -221,6 +249,9 @@ footer{
   line-height: 16px;
   letter-spacing: 2%;
   text-decoration: none;
+  transition-property: color;
+transition-duration: 250ms;
+transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* .active-svg{
@@ -248,6 +279,7 @@ justify-content: center;
   display: flex;
   justify-content: center;
   align-items: center;
+  fill:  rgb(175, 177, 184);
 }
 
 .client-item{
@@ -258,10 +290,11 @@ width: 170px;
 justify-content: center;
   align-items: center;
 height: 92px;
+fill:  rgb(175, 177, 184);
 }
 
 .client-item:hover{
-color: var(--accent-color);
+fill: var(--accent-color);
 }
 
 .what-we-do-img {
@@ -350,6 +383,7 @@ margin-left: 95px;
 .so-net-ico{
   width: 20px;
 height: 20px;
+
 }
 
 .svg-ico-item:hover{
@@ -575,14 +609,16 @@ border-radius: 50%;
 
 .so-net-ico-link{
   display: block;
-  padding: 12px 12px;
+  padding: 8px 8px;
 }
 
 .so-net-link{
   color: white;
 fill: currentColor;
   display: block;
   padding: 12px 12px;
+  transition-property: background-color, transform;
+  transition-duration: 250ms;
 }
 
 .so-net-link .so-net-ico:hover{
@@ -604,6 +640,13 @@ fill: white;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
+  transition-property: background-color, transform;
+  transition-duration: 250ms;
+}
+
+
+.so-net-ico-item-item{
+  transform: cubic-bezier(0.4, 0, 0.2, 1); 
 }
 
 .fo-so-net-item:hover{
@@ -614,6 +657,8 @@ fill: white;
 width: 24px;
 height: 24px;
 display: block;
+position: relative;
+  top: 2px;
 }
 
 .footer-button{
@@ -627,13 +672,20 @@ display: block;
   font-size: 16px;
   font-weight: 700;
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
-  transition: background-color 0.3s ease, transform 0.3s ease;
+  transition-property: background-color, transform;
+  transition-duration: 250ms;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.footer-button:hover{
+  background-color: var(--accent-color-hover);
+  transform: cubic-bezier(0.4, 0, 0.2, 1); 
+
+}
+
 .footer-img{
   margin-left: 10px;
 }
@@ -709,6 +761,13 @@ background: rgb(33, 150, 243);
 width: 200px;
 height: 50px;
 border-style: none;
+transition-property: background-color, transform;
+  transition-duration: 250ms;
+}
+
+.btn-send:hover{
+  background-color: var(--accent-color-hover);
+  transform: cubic-bezier(0.4, 0, 0.2, 1); 
 }
 
 .checkbox{
@@ -798,8 +857,20 @@ background: rgb(255, 255, 255);
 height: 4px;
   border-radius: 2px;
 background: rgb(33, 150, 243);
+transition-property: transform;
+transition-duration: 250ms;
+transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.active:hover .decor{
+ transform:translateY(-20px) ; 
 }
 
+.active:hover .decor-2{
+  transform: translateY(-20px);
+}
+
+
 .decor-2{
   position: relative;
   top: 30px;
@@ -808,6 +879,9 @@ background: rgb(33, 150, 243);
 height: 4px;
   border-radius: 2px;
 background: rgb(33, 150, 243);
+transition-property: transform;
+transition-duration: 250ms;
+transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .fo-so-net-list{
@@ -1017,7 +1091,6 @@ body {
   right: 30px;
   align-items: center; */
   /* justify-content: end; */
-
 }
 
 .header-phone{

портфоліо.html

@@ -68,7 +68,7 @@
             <section>
                 <ul class="main-buttons-list">
                     <li class="main-buttons-item">
-                        <button class="active-now" type="button">Усі</button>
+                        <button class="active-ground1" type="button">Усі</button>
                     </li>
                     <li class="main-buttons-item">
                         <button class="active-ground" type="button">Веб-сайти</button>