Update buttons CSS

static/style.css

@@ -71,6 +71,28 @@ a {
   color: white;
 }
 
+.white-button, .blue-button {
+  display: inline-block;
+  cursor: pointer;
+  height: 50px;
+  text-align: center;
+  padding-left: 2em;
+  padding-right: 2em;
+  font-weight: normal;
+  line-height: 50px;
+}
+
+.blue-button {
+  background-color: #497ed5;
+  color: white;
+}
+
+.white-button {
+  background-color: white;
+  color: #497ed5;
+  border: 1px solid #497ed5;
+}
+
 div#inputs {
   background-color: white;
 }
@@ -140,35 +162,6 @@ div.navButtons {
   margin-top: 2em;
 }
 
-div.navButtons > a, a#save-image, a#tweet-button, button {
-  display: inline-block;
-  cursor: pointer;
-  height: 50px;
-  line-height: 50px;
-  text-align: center;
-  background-color: white;
-  color: inherit;
-  font-size: inherit;
-  border: 1px solid #497ed5;
-}
-
-a.nextButton, a#tweet-button {
-  color: white !important;
-  background-color: #497ed5 !important;
-  width: 200px;
-}
-
-a#tweet-button {
-  width: auto;
-  padding-left: 1em;
-  padding-right: 1em;
-  font-weight: normal;
-}
-
-a.prevButton {
-  width: 50px;
-}
-
 main {
   background-color: #ebf3ff;
   min-height: 100%;

views/index.ejs

@@ -24,7 +24,7 @@
     <div id="body">
       <div id="inputs">
 	<div>
-	  <button id="randomize">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
+	  <button id="randomize" class="white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
 	</div>
 	<div id="step1">
 	  <h2>Choisissez la couleur de fond</h2>
@@ -94,15 +94,15 @@
 	    </label>
 	  </div>
 	  <div class="navButtons">
-	    <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
+	    <a href="#step2" class="blue-button">ÉTAPE SUIVANTE &rsaquo;</a>
 	  </div>
 	</div>
 	<div id="step2">
 	  <h2>Remplissez le texte à trou</h2>
 	  <textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" maxlength="90"></textarea>
 	  <div class="navButtons">
-	    <a href="#step1" class="prevButton">&lsaquo;</a>
-	    <a href="#step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
+	    <a href="#step1" class="white-button">&lsaquo;</a>
+	    <a href="#step3" class="blue-button">ÉTAPE SUIVANTE &rsaquo;</a>
 	  </div>
 	</div>
 	<div id="step3">
@@ -121,8 +121,8 @@
 	    <input type="radio" id="radio-font-11" name="font" value="terminal" /><label for="radio-font-11" style="font-family: terminal">Terminal</label>
 	  </div>
 	  <div class="navButtons">
-	    <a href="#step2" class="prevButton">&lsaquo;</a>
-	    <a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
+	    <a href="#step2" class="white-button">&lsaquo;</a>
+	    <a href="#step4" class="blue-button">ÉTAPE SUIVANTE &rsaquo;</a>
 	  </div>
 	</div>
 	<div id="step4">
@@ -202,23 +202,23 @@
 	    <label for="radio-icon-36" style="background-position: 100% 100%"></label>
 	  </div>
 	  <div class="navButtons">
-	    <a href="#step3" class="prevButton">&lsaquo;</a>
-	    <a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
+	    <a href="#step3" class="white-button">&lsaquo;</a>
+	    <a href="#step5" class="blue-button">ÉTAPE SUIVANTE &rsaquo;</a>
 	  </div>
 	</div>
 	<div id="step5">
 	  <h2>Signez votre création ! (optionnel)</h2>
 	  <input type="text" id="signature" />
 	  <div class="navButtons">
-	    <a href="#step4" class="prevButton">&lsaquo;</a>
+	    <a href="#step4" class="white-button">&lsaquo;</a>
 	  </div>
 	</div>
       </div>
       <main>
 	<div>
 	  <canvas id="output" width="600" height="413"></canvas>
-	  <a id="tweet-button" target="_blank" href="https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net !">Tweet <span class="fa fa-twitter"></span></a>
-	  <a id="save-image" download="lqdn-slogan.png">Enregistrer <span class="fa fa-save"></span></a>
+	  <a id="tweet-button" class="blue-button" target="_blank" href="https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net !">Tweet <span class="fa fa-twitter"></span></a>
+	  <a id="save-image" class="white-button" download="lqdn-slogan.png">Enregistrer <span class="fa fa-save"></span></a>
 	</div>
 	<div id="credits">
 	  <p><strong>Site hébergé par La Quadrature du Net</strong></p>