Boutons superposés

L’exemple suivant présente des boutons superposés.

Ils sont ici rendu visibles, mais la couleur peut leur être enlevés dès que placés afin de les rendu invisible.

Télécharger l'exemple

HTML

<div class="animation" id="mon-animation">
   <!-- début du code à observer -->
   <div class="boutons-invisibles">
      <div class="bouton-invisible bouton-invisible--1"></div>
      <div class="bouton-invisible bouton-invisible--2"></div>
   </div>
   <!-- fin du code à observer -->

</div>

CSS

.animation {
   /* taille max et bordure */
   max-width: 512px;
   border: 1px dashed grey;
   position: relative; /* ⚠️ */
}

.boutons-invisibles {
   position: absolute; /* ⚠️ */
   left: 0; /* ⚠️ */
   top: 0; /* ⚠️ */
   width: 100%; /* ⚠️ */
   height: 100%; /* ⚠️ */
   background: rgba(255,0,0,0.25); /* ⚠️ */
   z-index: 99; /* ⚠️ */
}

.bouton-invisible {
   position: absolute; /* ⚠️ */
}

.bouton-invisible:hover {
   cursor: pointer; /* ⚠️ */
}

.bouton-invisible--1 {
   left: 10%; /* ⚠️ */
   top: 10%; /* ⚠️ */
   width: 20%; /* ⚠️ */
   height: 30%; /* ⚠️ */
   background: rgba(0,255,0,0.25); /* ⚠️ à supprimer une fois le bouton placé au bon endroit */
}

.bouton-invisible--1:hover {
   background: rgba(0,255,0,0.5); /* ⚠️ à supprimer une fois le bouton placé au bon endroit */
   cursor: pointer; /* ⚠️ */
}

.bouton-invisible--2 {
   right: 10%; /* ⚠️ */
   bottom: 10%; /* ⚠️ */
   width: 30%; /* ⚠️ */
   height: 30%; /* ⚠️ */
   border-radius: 50%; /* bouton curculaire ⚠️ */
   background: rgba(0,0,255,0.25); /* ⚠️ à supprimer une fois le bouton placé au bon endroit */
}

.bouton-invisible--2:hover {
   background: rgba(0,0,255,0.5); /* ⚠️ à supprimer une fois le bouton placé au bon endroit */
}

JavaScript

// on sélectionne le bouton 1 grâce à sa classe 'bouton-invisible--1'
// le point devant indique qu'il s'agit d'une classe
var bouton_1 =  document.querySelector('.bouton-invisible--1');

// idem bouton 2
var bouton_2 = document.querySelector('.bouton-invisible--2');

// on ajoute un écouteur d'événement sur le bouton 1
bouton_1.addEventListener('click', function(){
   // qui met l'animation en pause
   animation.pause();
})

// idem
bouton_2.addEventListener('click', function(){
   // qui met l'animation en lecture
   animation.play();
})