Update button ui

css/app.css

@@ -1,4 +1,12 @@
 @keyframes wiggle{0%{padding-top:20px}50%{padding-top:28px}to{padding-top:20px}}
+@keyframes bounceright {
+    from {
+      -webkit-transform: translateX(0);
+    }
+    to {
+      -webkit-transform: translateX(3px);
+    }
+  }
 @font-face {
     font-family: "Spartan";
     src: url('./fonts/Spartan-VariableFont_wght.ttf');
@@ -26,6 +34,60 @@ button:focus {
     outline: none !important;
 }
 
+.button {
+    display: flex;
+    align-items: center;
+    font-family: "Montserrat", "Trebuchet MS", Helvetica, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    position: relative;
+    padding: 0.8em 1.4em;
+    padding-right: 4.7em;
+    max-width: 250px;
+    margin: auto;
+    background: #009ed8;
+    border: none;
+    border-radius: 5px;
+    color: white !important;
+    text-decoration: none !important;
+    transition: 0.2s;
+  }
+  .button:before,
+  .button:after {
+    position: absolute;
+    right: 0;
+    padding-top: inherit;
+    padding-bottom: inherit;
+    width: 2.8em;
+    content: "\00a0";
+    font-family: "Font Awesome 5 Free", sans-serif;
+    font-size: 1.2em;
+    text-align: center;
+    transition: 0.2s;
+    transform-origin: 50% 60%;
+  }
+  .button:before {
+    background: rgba(0, 0, 0, 0.1);
+    top: 0;
+    bottom: 0;
+  }
+  .button:hover {
+    background: #0079a5;
+  }
+  .button:active,
+  .button:focus {
+    background: #002e3f;
+    outline: none;
+  }
+
+  .arrow:after {
+    font-weight: 900;
+    content: "\f105";
+  }
+  .arrow:hover:after {
+    -webkit-animation: bounceright 0.3s alternate ease infinite;
+    animation: bounceright 0.3s alternate ease infinite;
+  }
+
 /*HEADER*/
 header {
 	width: 100%;

index.html

@@ -154,7 +154,7 @@ <h4 class="card-title">Responsive Web Design</h5>
 						<p class="card-text">Conception Web qui vise à l'élaboration de sites avec une expérience optimale de lecture et de navigation pour l'utilisateur quelle que soit sa gamme d'appareil.</p>
 				</div>
 				<div class="card-footer text-muted">
-					<a href="#realisations" class="btn btn-primary">Voir mes réalisations</a>
+					<a href="#realisations" class="button arrow">Voir mes réalisations</a>
 				</div>
 			</div>
 			<a class="anchor" id="phonegap"></a>
@@ -164,7 +164,7 @@ <h4 class="card-title"><img class="card-logo" src="./images/phonegap2.png" /></h
 					<p class="card-text">Framework qui permet à partir de languages web (HTML/CSS/JS) la création d'applications mobiles hybrides.</p>
 				</div>
 				<div class="card-footer text-muted">
-					<a href="#realisations" class="btn btn-primary">Voir mes réalisations</a>
+					<a href="#realisations" class="button arrow">Voir mes réalisations</a>
 				</div>
 			</div>
 		</div>
@@ -234,7 +234,7 @@ <h5 class="card-title">Intégration Frontend</h5>
 					</p>
 				</div>
 				<div class="card-footer text-muted">
-					<a href="#realisations" class="btn btn-primary">Voir mes réalisations</a>
+					<a href="#realisations" class="button arrow">Voir mes réalisations</a>
 				</div>
 			</div>
 			<div class="w-100">
@@ -253,7 +253,7 @@ <h5 class="card-title">Magento</h5>
 					</p>
 				</div>
 				<div class="card-footer text-muted">
-					<a href="#realisations" class="btn btn-primary">Voir mes réalisations</a>
+					<a href="#realisations" class="button arrow">Voir mes réalisations</a>
 				</div>
 			</div>
 			<a class="anchor" id="bdd"></a>
@@ -268,7 +268,7 @@ <h5 class="card-title">Base de données</h5>
 					</p>
 				</div>
 				<div class="card-footer text-muted">
-					<a href="#realisations" class="btn btn-primary">Voir mes réalisations</a>
+					<a href="#realisations" class="button arrow">Voir mes réalisations</a>
 				</div>
 			</div>
 			<div class="w-100 d-none d-sm-block d-md-none">
@@ -288,7 +288,7 @@ <h5 class="card-title">Gestion de versions et dépendances</h5>
 					</p>
 				</div>
 				<div class="card-footer text-muted">
-					<a href="#realisations" class="btn btn-primary">Voir mes réalisations</a>
+					<a href="#realisations" class="button arrow">Voir mes réalisations</a>
 				</div>
 			</div>
 			<div class="w-100 d-none d-md-block d-lg-none">
@@ -309,7 +309,7 @@ <h5 class="card-title">Reporting et Intégration continue</h5>
 					</p>
 				</div>
 				<div class="card-footer text-muted">
-					<a href="#realisations" class="btn btn-primary">Voir mes réalisations</a>
+					<a href="#realisations" class="button arrow">Voir mes réalisations</a>
 				</div>
 			</div>
 			<div class="w-100 d-none d-sm-block d-md-none">
@@ -334,7 +334,7 @@ <h5 class="card-title">Analyse de performances et tests</h5>
 					</p>
 				</div>
 				<div class="card-footer text-muted">
-					<a href="#realisations" class="btn btn-primary">Voir mes réalisations</a>
+					<a href="#realisations" class="button arrow">Voir mes réalisations</a>
 				</div>
 			</div>
 		</div>