Cards footer button aligned to bottom with hover animation

Author: Muhammed-Rahif

src/components/ProjectList/ProjectsCards.jsx

@@ -34,8 +34,8 @@ const Card = ({
           <div className="Card-Description">
             <p> {description}</p>
           </div>
-          <div className="Card-Link">Go to Project</div>
         </div>
+        <div className="Card-Link">Go to Project</div>
       </a>
     </div>
   );

src/components/ProjectList/css/project-cards.css

@@ -10,7 +10,7 @@
 }
 .Project-Logo {
   width: 45%;
-  height: 40%;
+  height: auto;
   margin-top: 5%;
 }
 .Card-Body {
@@ -49,6 +49,8 @@
   color: black;
 }
 .Card-Real-Link:link {
+  display: flex;
+  flex-direction: column;
   text-decoration: none;
   color: black;
   margin: 0 auto;
@@ -63,8 +65,16 @@
 }
 .Card-Link {
   position: relative;
-  padding: 10px;
+  padding: 15px;
   color: #0f3cef;
+  background: transparent;
+  transition: .5s;
+  margin-top: auto;
+  border-top: rgba(0, 0, 0, 0.12) 1px solid;
+}
+.Card-Link:hover {
+  color: whitesmoke;
+  background: #0f3cef;
 }
 .Card-Title {
   margin-top: 6%;

src/components/ProjectList/css/search.css

@@ -16,6 +16,10 @@
   border: 1px solid #DCDCDC;
 }
 
+#search:hover,#search:focus {
+  border: 1px #0f3cef solid ;
+}
+
 .inputContainer {
    width: 47%;
    margin-top: 40px;