feat: add all buttons colors properties

src/css/buttons.css

+/***** BUTTON *****/
+.button {
+    margin: 10px;
+    border-color: var(--ifm-color-success);
+    color: var(--ifm-color-frame);
+    border-style: none;
+    white-space : initial;
+    font-family: var(--ifm-font-family-base);
+}
+
+.button--beta {
+    background-color: var(--ifm-color-success);
+    border-color: var(--ifm-color-success);
+    color: var(--ifm-color-frame);
+    border-style: none;
+}
+
+.button--beta:hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-info);
+    border-style: none;
+}
+
+/* btn note */
+.button--note {
+    background-color: var(--ifm-color-gray-300);
+    color: var(--ifm-color-gray-800);
+    border: 1px solid var(--ifm-color-gray-800);
+}
+
+.button--note:not(.button--outline) {
+    background-color: var(--ifm-color-gray-300);
+    color: var(--ifm-color-gray-800);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-gray-800);
+}
+
+.button--note:hover, .button--note:not(.button--outline):hover {
+    color: var(--ifm-color-gray-800);
+    background-color: var(--ifm-color-gray-100);
+    border-style: none;
+    border: 1px solid var(--ifm-color-gray-800);
+}
+
+/* btn success */
+.button--success {
+    background-color: var(--ifm-color-success-darkest);
+    color: var(--ifm-color-white);
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--success:not(.button--outline) {
+    background-color: var(--ifm-color-success-darkest);
+    color: var(--ifm-color-white);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--success:hover, .button--success:not(.button--outline):hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-success);
+    border-style: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+/* btn info */
+.button--info {
+    background-color: var(--ifm-color-info-darkest);
+    color: var(--ifm-color-white);
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--info:not(.button--outline) {
+    background-color: var(--ifm-color-info-darkest);
+    color: var(--ifm-color-white);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--info:hover, .button--info:not(.button--outline):hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-info-dark);
+    border-style: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+/* btn warning */
+.button--warning {
+    background-color: var(--ifm-color-warning-darkest);
+    color: var(--ifm-color-white);
+}
+
+.button--warning:not(.button--outline) {
+    background-color: var(--ifm-color-warning-darkest);
+    color: var(--ifm-color-white);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--warning:hover, .button--warning:not(.button--outline):hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-warning-darker);
+    border: 1px solid var(--ifm-color-white);
+}
+
+/* btn danger */
+.button--danger {
+    background-color: var(--ifm-color-danger-darkest);
+    color: var(--ifm-color-white);
+}
+
+.button--danger:not(.button--outline) {
+    background-color: var(--ifm-color-danger-darkest);
+    color: var(--ifm-color-white);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--danger:hover, .button--danger:not(.button--outline):hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-danger);
+    border: 1px solid var(--ifm-color-white);
+}
+
+/* button "La doc de Froggit" */
+.breadcrumbs__item--active .breadcrumbs__link {
+    background: var(--ifm-breadcrumb-item-background-active);
+    color: var(--ifm-color-warning);
+}

src/css/custom.css

 @import url("variables.css");
+@import url("buttons.css");
 @import url("fonts.css");
 @import url("footer.css");
 @import url("dark-theme.css");
@@ -126,6 +127,7 @@ ul {
   padding-bottom: 20px;
 }
 
+<<<<<<< HEAD
 .btn-little-txt {
   font-size: small;
 }
@@ -168,6 +170,8 @@ ul {
   background-color: var(--ifm-color-frame);
 }
 
+=======
+>>>>>>> feat: add all buttons colors properties
 /******* MAIN ELEM *******/
 .section-promises {
   padding: 4rem 0;
@@ -239,12 +243,6 @@ ul {
   color: var(--ifm-color-warning);
 }
 
-/* button "La doc de Froggit" */
-.breadcrumbs__item--active .breadcrumbs__link {
-  background: var(--ifm-breadcrumb-item-background-active);
-  color: var(--ifm-color-warning);
-}
-
 /****** MEDIA SCREEN *******/
 @media screen and (max-width:330px) {
   .navbar {

src/pages/dummy_page.mdx

@@ -13,11 +13,32 @@ Page factice penser à créer une vraie page !
 echo "Hello World"
 ```
 
-## Hello mon carousel Libre !
+<button className="button button--note">button--note</button>
+<button className="button button--success">button--success</button>
+<button className="button button--info">button--info</button>
+<button className="button button--warning">button--warning</button>
+<button className="button button--danger">button--danger</button>
 
-<div>
-    <CarouselLibre />
-</div>
+
+:::note Bêta en cours 🧪
+🔜 **Les tarifs arrivent !** <a class="button button--note" href="http://beta.froggit.fr/">En attendant rejoignez la bêta !</a>
+:::
+
+:::success Bêta en cours 🧪
+🔜 **Les tarifs arrivent !** <a class="button button--success" href="http://beta.froggit.fr/">En attendant rejoignez la bêta !</a>
+:::
+
+:::info Bêta en cours 🧪
+🔜 **Les tarifs arrivent !** <a class="button button--info" href="http://beta.froggit.fr/">En attendant rejoignez la bêta !</a>
+:::
+
+:::caution Bêta en cours 🧪
+🔜 **Les tarifs arrivent !** <a class="button button--warning" href="http://beta.froggit.fr/">En attendant rejoignez la bêta !</a>
+:::
+
+:::danger Bêta en cours 🧪
+🔜 **Les tarifs arrivent !** <a class="button button--danger" href="http://beta.froggit.fr/">En attendant rejoignez la bêta !</a>
+:::
 
 :::note