From e1004e5fdefb081b3e031a646d08cde33f89c9ba Mon Sep 17 00:00:00 2001
From: xolosArmy Network <contacto@xolosramirez.com>
Date: Wed, 18 Sep 2024 09:00:45 -0600
Subject: [PATCH] Update styles.css

---
 styles.css | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/styles.css b/styles.css
index 3d14262..a5b24ae 100644
--- a/styles.css
+++ b/styles.css
@@ -101,6 +101,43 @@ section {
     height: 100%;
 }
 
+.paybutton-widget {
+  display: inline-block;
+  background-color: #4CAF50; /* Green background color */
+  color: white; /* White text color */
+  font-family: Arial, sans-serif; /* Font family */
+  font-size: 16px; /* Font size */
+  padding: 12px 24px; /* Padding around text */
+  border: none; /* No border */
+  border-radius: 5px; /* Rounded corners */
+  text-align: center; /* Center align text */
+  text-decoration: none; /* Remove underline */
+  cursor: pointer; /* Pointer cursor on hover */
+  transition: background-color 0.3s, transform 0.3s; /* Smooth transition for background color and scale */
+}
+
+.paybutton-widget:hover {
+  background-color: #45a049; /* Darker green on hover */
+  transform: scale(1.05); /* Slightly enlarge button on hover */
+}
+
+.paybutton-widget:active {
+  background-color: #388e3c; /* Even darker green when button is pressed */
+}
+
+.paybutton-widget::after {
+  content: attr(text); /* Show the text content */
+}
+
+.paybutton-widget[hover-text]:hover::after {
+  content: attr(hover-text); /* Change content on hover */
+}
+
+.paybutton-widget[success-text]::after {
+  content: attr(success-text); /* Show success text if present */
+}
+
+
 
 footer {
     background: #222;