diff --git a/src/styles/base/_buttons.scss b/src/styles/base/_buttons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1bc8194895431c8133f5544c373715fa6604958d
--- /dev/null
+++ b/src/styles/base/_buttons.scss
@@ -0,0 +1,82 @@
+@import 'color';
+@import 'mixins';
+
+button {
+  &.btn-highlight {
+    @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
+      background-color: darken($gold-shadow, 12%);
+    }
+  }
+  &.btn-primary-positive {
+    @include button(
+      transparent,
+      $gold-shadow,
+      1px solid $dark-light-2,
+      transparent
+    ) {
+      background-color: rgba($dark-light-2, 0.2);
+      span:first-child {
+        color: rgba($gold-shadow, 0.7);
+      }
+    }
+  }
+  &.btn-primary-negative {
+    @include button(
+      transparent,
+      $gold-shadow,
+      1px solid $grey-dark,
+      transparent
+    ) {
+      background-color: rgba($grey-dark, 0.2);
+      span:first-child {
+        color: rgba($gold-shadow, 0.7);
+      }
+    }
+  }
+  &.btn-secondary-positive {
+    @include button(
+      transparent,
+      $grey-bright,
+      1px solid $dark-light-2,
+      transparent
+    ) {
+      background-color: rgba($dark-light-2, 0.2);
+      span:first-child {
+        color: rgba($grey-bright, 0.7);
+      }
+    }
+  }
+  &.btn-secondary-negatif {
+    @include button(
+      transparent,
+      $grey-bright,
+      1px solid $grey-dark,
+      transparent
+    ) {
+      background-color: rgba($grey-dark, 0.2);
+      span:first-child {
+        color: rgba($grey-bright, 0.7);
+      }
+    }
+  }
+  &.btn-duel-off {
+    @include button(
+      $dark-light-2,
+      $white,
+      1px solid rgba(97, 240, 242, 0.5),
+      $dark-light-2
+    ) {
+      background-color: darken($dark-light-2, 12%);
+    }
+  }
+  &.btn-duel-active {
+    @include button($blue, $dark-light-2, none, $blue) {
+      background-color: darken($blue, 30%);
+    }
+  }
+  &.btn-duel-on {
+    @include button($dark-light-2, $white, 1px solid $blue, $dark-background) {
+      background-color: darken($dark-light-2, 12%);
+    }
+  }
+}
diff --git a/src/styles/base/_mixins.scss b/src/styles/base/_mixins.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2ee793743b6cb8b7b4986d29d86334f4751449b2
--- /dev/null
+++ b/src/styles/base/_mixins.scss
@@ -0,0 +1,26 @@
+@mixin button(
+  $background,
+  $text-color,
+  $border: none,
+  $background-gradient: $background
+) {
+  background: $background-gradient;
+  background-color: $background;
+  border: $border;
+  border-radius: 2px;
+  margin: 1.5rem 0 0;
+  padding: 0.5rem 2.5rem;
+  width: 100%;
+  span:first-child {
+    color: $text-color;
+  }
+  &:hover,
+  &:focus,
+  &.active,
+  &:disabled {
+    @content;
+  }
+  &:disabled {
+    cursor: initial;
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 418f64c99c3579504435716af22b485a99681c5e..9d1b920ba83767dcb5fa8fec7ebe6304d18adf20 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -7,6 +7,7 @@
 @import 'base/color';
 @import 'base/breakpoint';
 @import 'base/typography';
+@import 'base/buttons';
 @import 'components/barchart';
 
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');