upd buttons style

Author: LipezJ

dark.css

@@ -2,11 +2,16 @@ body {
     background-color: #242629;
 }
 button {
+    border: 3px #3b2b6b solid;
+    border-bottom: 6px #3b2b6b solid;
     background-color: #7f5af0;
     color: #dfdfdd;
 }
 button:hover {
-    background-color: #4b368a;
+    background-color: #5c42ac;
+}
+button:active {
+    border-bottom: 3px #3b2b6b solid;
 }
 #copiar-cont, #input, #copiar-area, input{
     background-color: #16161a;
@@ -22,9 +27,6 @@ button:hover {
     border: 3px #000 solid;
     outline: none;
 }
-button {
-    border: 3px #4b368a solid;
-}
 header {
     border-bottom: 3px #a5b3c5 solid;
     color: #a5b3c5;
@@ -45,7 +47,7 @@ i, #ctitle {
     border: #249264 solid 3px;
     color: #fffffe;
 }
-.fa-arrow-right-arrow-left, .fa-broom, .fa-wrench {
+.fa-arrow-right-arrow-left, .fa-broom, .fa-circle-half-stroke, .fa-wrench, .fa-plus, .fa-minus, .fa-xmark, .fa-repeat {
     color: #dfdfdd;
 }
 body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {

light.css

@@ -4,10 +4,15 @@ body {
 button{
     background-color: #8c7851;
     color: #fffffe;
+    border: 3px #020826 solid;
+    border-bottom: 6px #020826 solid;
 }
 button:hover {
     background-color: #716040;
 }
+button:active {
+    border-bottom: 3px #020826 solid;
+}
 #configp {
     background-color: #f9f4ef;
 }
@@ -17,7 +22,7 @@ button:hover {
 #copiar-cont, #input, input  {
     background-color: #f8ede1b4;
 }
-#copiar-cont, #input, button {
+#copiar-cont, #input {
     border: 3px #020826 solid;
     outline: none;
 }
@@ -40,7 +45,7 @@ i {
     border: #249264 solid 3px;
     color: #fffffe;
 }
-.fa-arrow-right-arrow-left, .fa-broom, .fa-circle-half-stroke, .fa-wrench, .fa-plus, .fa-minus, .fa-xmark{
+.fa-arrow-right-arrow-left, .fa-broom, .fa-circle-half-stroke, .fa-wrench, .fa-plus, .fa-minus, .fa-xmark, .fa-repeat{
     color: #fffffe;
 }
 body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {

style.css

@@ -26,20 +26,19 @@ input,
 #ccont {
     display: flex;
     flex-direction: column;
-    gap: 0px;
+    gap: 10px;
     justify-items: center;
 }
 .cinput {
     border-radius: 10px;
     outline: none;
     padding: 5px;
 }
-.ccinput {
+.ccinput, .cboton {
     display: flex;
     flex-direction: row;
     justify-content: center;
     gap: 15px;
-    margin-top: 10px;
 }
 #cvalor {
     width: 10rem;
@@ -65,7 +64,7 @@ button {
     padding: 5px 20px;
     margin: 10px 0px;
     height: auto;
-
+    outline: none;
     border-radius: 10px;
 }
 .boton {
@@ -121,6 +120,9 @@ header {
 #modob {
     padding: 5px 10px;
 }
+#modob:active {
+    padding-top: 7.5px;
+}
 
 footer {
     display: flex;
@@ -262,11 +264,20 @@ footer {
     button {
         padding: 5px;
     }
-    #limpiarb, #intercamb, #configb, #elimb, #agb {
+    #limpiarb, #intercamb, #configb {
         padding: 5px 25px;
     }
-    #salirb {
-        padding: 2px 6px;
+    #salirb, #elimb, #agb, #restb {
+        padding: 2px 10px;
+    }
+    #limpiarb:active, #intercamb:active, #configb:active {
+        padding-top: 6.5px;
+    }
+    #salirb:active, #elimb:active, #agb:active, #restb:active, #modob:active {
+        padding-top: 3.5px;
+    }
+    .cboton {
+        gap: 0px;
     }
     #cvalor {
         width: 6rem;
@@ -276,7 +287,8 @@ footer {
         text-align: center;
     }
     #configp {
-        left: 10vw;
+        left: 15vw;
+        right: auto;
     }
 }
 @media screen and (max-width: 450px) {
@@ -304,4 +316,9 @@ body::-webkit-scrollbar, textarea::-webkit-scrollbar {
 textarea::-webkit-scrollbar-track, textarea::-webkit-scrollbar-thumb,
 body::-webkit-scrollbar-track, body::-webkit-scrollbar-thumb {
     border-radius: 10px;
+}
+
+button:active {
+    padding-top: 6.5px;
+    padding-bottom: 6.5px;
 }