Update trending1.css

trending1.css

@@ -59,14 +59,54 @@ body {
 }
 
 .buttons {
-    background-color: blue;
+    background: linear-gradient(135deg, #007BFF, #1E90FF);
+    /* Gradient blue background */
     color: white;
-    border-radius: 60%;
+    /* Text color */
+    border-radius: 30px;
+    /* Softer, more elegant rounded corners */
     text-decoration: none;
-    width: 90px;
-    height: 25px;
+    /* Remove underline */
+    width: 120px;
+    /* Increased width for better readability */
+    height: 40px;
+    /* Increased height */
     font-family: Georgia, 'Times New Roman', Times, serif;
+    /* Classic font */
+    font-size: 16px;
+    /* Slightly larger text for better readability */
+    font-weight: bold;
+    /* Make text bold */
+    text-align: center;
+    /* Center text horizontally */
+    line-height: 40px;
+    /* Center text vertically */
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    /* Soft shadow for depth */
+    cursor: pointer;
+    /* Pointer on hover */
+    margin: 10px;
+    /* Add spacing around button */
+}
 
+/* Hover effect */
+.buttons:hover {
+    background: linear-gradient(135deg, #1E90FF, #007BFF);
+    /* Reverse gradient on hover */
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    /* Deeper shadow on hover */
+    transform: translateY(-3px);
+    /* Slight lift on hover */
+}
+
+/* Active effect (when button is clicked) */
+.buttons:active {
+    background: linear-gradient(135deg, #0056b3, #004080);
+    /* Darker gradient on click */
+    transform: translateY(0);
+    /* Reset lift on click */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    /* Slightly reduced shadow */
 }
 
 .buttons a {
@@ -148,38 +188,68 @@ body {
     /* Prevent overflow */
 }
 
-.button1 {
+/* Button container for centering at the bottom */
+.button-container {
     display: flex;
-    /* Flexbox for button */
     justify-content: center;
-    /* Center the text inside */
+    /* Center horizontally */
+    align-items: flex-end;
+    /* Align button at the bottom */
+    position: fixed;
+    bottom: 20px;
+    /* Distance from the bottom */
+    left: 0;
+    right: 0;
+    width: 100%;
+    /* Ensure it spans the entire width */
+    padding: 10px;
+}
+
+.button1 {
+    display: inline-flex;
+    justify-content: center;
     align-items: center;
-    /* Center vertically */
     height: 50px;
     /* Button height */
     width: 200px;
     /* Button width */
     cursor: pointer;
     /* Pointer on hover */
-    background-color: #36fe9a;
-    /* Button color */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    /* Box shadow */
+    background: linear-gradient(45deg, #36fe9a, #28a745);
+    /* Gradient color */
+    color: white;
+    /* Text color */
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    /* More prominent shadow */
     border: none;
     /* Remove border */
-    border-radius: 5px;
-    /* Rounded corners */
-    margin-top: 20px;
-    /* Space above the button */
-    transition: background-color 0.3s ease;
-    /* Smooth transition */
+    border-radius: 50px;
+    /* Rounded button */
+    margin: 0 auto;
+    /* Centering in the flex container */
+    font-size: 1.1em;
+    font-weight: bold;
 }
 
+/* Make sure anchor tag inside button matches style */
 .button1 a {
     text-decoration: none;
-    background-color: #36fe9a;
+    color: white;
+    /* Ensures link text is white */
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
+    /* Fill the entire button */
+    height: 100%;
+}
 
+/* Hover effect */
+.button1:hover {
+    background: linear-gradient(45deg, #28a745, #36fe9a);
+    /* Reverse gradient on hover */
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
+    /* Deepen the shadow */
+    transform: translateY(-3px);
+    /* Lift the button slightly */
 }