Bouton play en svg

assets/sass/index.scss

@@ -133,22 +133,21 @@
         width: 100%;
         position: relative;
 
-        &::after {
+        .ouvrir-brochure {
           position: absolute;
-          content: "▶";
-          font-size: 2rem;
-          left: 0;
-          bottom: 0;
-          width: 100%;
-          text-align: center;
-          color: grey;
+          top: 0.7rem;
+          left: 0.7rem;
+          width: 15%;
           background-color: white;
-          opacity: 0.8;
+          opacity: 0.7;
+          border-radius: 0.5rem;
+          border: solid 1px grey;
         }
 
-        &:hover::after {
-          opacity: 0.9;
-          color: black;
+        &:hover {
+          .ouvrir-brochure {
+            opacity: 1;
+          }
         }
       }
 

layouts/index.html

@@ -19,6 +19,7 @@ <h1>{{.Title}}</h1>
         <div id="adultes" class="acces-brochure adultes">
           <a class="couverture" href="brochure/adultes">
             <img src="./adultes.jpg" alt="Permis de prudence pour les adultes : pour parler aux enfants des aggressions sexuelles">
+            <img src="./play.svg" class="ouvrir-brochure">
           </a>
           <div class="bouton-bulle">
             <a id='telechargement_brochure_adultes' class="bouton-pdf" href="permis_de_prudence_pour_les_adultes.pdf">Téléchager le pdf ▼</a>
@@ -27,6 +28,7 @@ <h1>{{.Title}}</h1>
         <div id="enfants" class="acces-brochure">
           <a class="couverture" href="brochure/enfants">
             <img src="./enfants.jpg" alt="Permis de prudence pour les enfants : pour parler des aggressions sexuelles">
+            <img src="./play.svg" class="ouvrir-brochure">
           </a>
           <div class="bouton-bulle">
             <a id='telechargement_brochure_enfants' class="bouton-pdf" href="permis_de_prudence_pour_les_enfants.pdf">Téléchager le pdf ▼</a>