diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index bf50caebfbee10ae68a69e7d1c59087a3f1b9b9f..5ae0373413aa093436e53ea165590393eb7a16cc 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -2,6 +2,7 @@
 @import "~bootstrap/scss/bootstrap";
 @import "~bootstrap/scss/variables";
 @import "./layout/header";
+@import "~bootstrap/scss/_mixins.scss";
 
 body {
   height:100%;
@@ -46,21 +47,9 @@ button[type=submit]{
   opacity: 1;
 }
 
-#btn-orange {
-  background: #FA772E;
-  color: white;
-  border: none;
-  border-radius: 3px;
-  line-height: 1.5;
-  font-size: 1rem;
-  padding: .5rem 1rem;
-  text-align: center;
-  text-transform: uppercase;
-  box-shadow: 0 -2px 0 #f05b2b inset;
-}
-
-#btn-orange:hover {
-  background: #f05b2b;
+$orange-button-bt: #FA772E;
+.btn-orange {
+  @include button-variant($orange-button-bt, $orange-button-bt, white, #f05b2b, #f05b2b);
 }
 
 #user-block {
diff --git a/templates/capsule/index.html.twig b/templates/capsule/index.html.twig
index c70d9a25ea9ec8205c7d395a329df0f8df0a564e..4a029c3e85eee5292dd4879af05fcde654ce11da 100644
--- a/templates/capsule/index.html.twig
+++ b/templates/capsule/index.html.twig
@@ -25,7 +25,7 @@
             {% endif %}
 
             <form class="d-flex mb-4 mb-lg-0">
-                <button id="btn-orange" formaction="/create">
+                <button class="btn btn-orange text-uppercase" formaction="/create">
                     + {{ 'capsule.create_capsule'|trans }}
                 </button>
             </form>