feature: анимация квадратной кнопки

blocks/button-animatuion/rectangular-button.css

@@ -0,0 +1,36 @@
+.rectangular-button {
+  position: relative;
+  transition: color 0.3s, background-image 0.3s;
+}
+
+.rectangular-button:hover {
+  color: #fff;
+  background-image: url(../../images/back-arrow-white.svg);
+}
+
+.rectangular-button:hover:after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 0%;
+  display: block;
+  background-color: #000;
+  animation: button-background 0.9s ease forwards;
+  transition: transform 0.1s ease;
+}
+
+.rectangular-button:active:after {
+  transform: scale(1.1, 1.4);
+}
+
+@keyframes button-background {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}

index.html

@@ -48,7 +48,7 @@
 </header>
 <main>
   <section class="hero">
-    <div class="hero__link-wrap"><a href="#" class="hero__back-btn">ПРОЕКТЫ</a></div>
+    <div class="hero__link-wrap"><a href="#" class="hero__back-btn rectangular-button">ПРОЕКТЫ</a></div>
     <div class="hero__wrap">
       <div class="hero__desc">
         <p class="hero__subtitle">Межсезонные читки и обсуждение пьес из списка отмеченных отборщиками

pages/index.css

@@ -75,3 +75,8 @@
 @import url(../blocks/copyrights/__paragraph/_logo/copyrights__paragraph_logo.css);
 @import url(../blocks/copyrights/__shishki-text/copyrights__shishki-text.css);
 @import url(../blocks/copyrights/__link/copyrights__link.css);
+
+
+
+/* ---------------Buuton animations-------------- */
+@import url(../blocks/button-animatuion/rectangular-button.css);