Merge pull request #766 from ZainabR11/hack-1

Animated Hover Button

courses.css

@@ -43,7 +43,6 @@ body {
   color: var(--color-white);
   background: #071f30;
 }
-
 .container {
   width: var(--container-width-lg);
   margin: 0 auto;
@@ -91,8 +90,37 @@ img {
   display: block;
   object-fit: cover;
 }
+/* HOVER ANIMATED BUTTON */
+/* .container1{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  text-align: center;
+  min-height: 100vh;
+}
+.hack1{
+width: 300px;
+height: 100px;
+border: none;
+color: white;
+background-color: rgb(231, 18, 53);
+border-radius: 4px;
+box-shadow: inset 0 0 0 0 yellow;
+transition: ease-out 0.3s;
+font-size: 2rem;
+outline: none;
+
+
+}
+.hack1:hover{
+  box-shadow: inset 300px 0 0 yellow;
+  cursor: pointer;
+  color: black; */
 
-.btn {
+/* } */
+
+/* .btn {
   display: inline-block;
   border-color: rgb(121, 116, 116);
   background-color: rgba(157, 147, 147, 0.562);
@@ -101,15 +129,15 @@ img {
   border-right: 1px solid;
   font-weight: 500;
   transition: var(--transition);
-}
+} 
 
 .btn:hover {
   background: transparent;
   color: var(--color-white);
   border-color: var(--color-white);
-}
+} */
 
-.btn-primary {
+/* .btn-primary {
   background: var(--color-define);
   color: var(--color-white);
   border-radius: 30px;
@@ -120,9 +148,9 @@ img {
   border-top: 3px solid;
   border-right: 3px solid;
   border-color: #761142b1;
-}
+}  */
 
-.button a span {
+/* .button a span {
   position: relative;
   display: inline-block;
   font-size: 18px;
@@ -133,9 +161,9 @@ img {
   letter-spacing: 2px;
   font-weight: 500;
   margin-top: 60px;
-}
+}  */
 
-.button a span:before {
+/* .button a span:before {
   content: "";
   position: absolute;
   top: 0;
@@ -146,11 +174,11 @@ img {
   background-color: #ff960b;
   z-index: -1;
   transition: all ease 0.5s;
-}
-
+}  */
+/* 
 .button a span:hover:before {
   width: 100%;
-}
+}  */
 
 .imgg img {
   position: relative;