Choisissez votre profil

<div class= »choix-prospect »>
<h2>Choisissez votre profil</h2>

<div class= »boutons-choix »>

<label class= »btn-label »>
<input type= »radio » name= »choix » value= »https://votre-site.com/page-destination-1″>
<span>Label 1</span>
</label>

<label class= »btn-label »>
<input type= »radio » name= »choix » value= »https://votre-site.com/page-destination-2″>
<span>Label 2</span>
</label>

<label class= »btn-label »>
<input type= »radio » name= »choix » value= »https://votre-site.com/page-destination-3″>
<span>Label 3</span>
</label>

</div>
</div>

<style>
.choix-prospect {
max-width: 700px;
margin: 40px auto;
text-align: center;
font-family: Arial, sans-serif;
}

.choix-prospect h2 {
margin-bottom: 25px;
font-size: 28px;
}

.boutons-choix {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}

/* On cache le vrai bouton radio */
.btn-label input {
display: none;
}

.btn-label span {
display: inline-block;
padding: 18px 35px;
background-color: #f2f2f2;
border: 2px solid #ddd;
border-radius: 12px;
cursor: pointer;
font-size: 18px;
transition: all 0.3s ease;
}

.btn-label span:hover {
background-color: #e6f3ef;
border-color: #2f8f73;
}

.btn-label input:checked + span {
background-color: #2f8f73;
color: white;
border-color: #2f8f73;
}
</style>

<script>
document.querySelectorAll(‘input[name= »choix »]’).forEach(function(radio) {
radio.addEventListener(‘change’, function() {
if (this.value) {
window.location.href = this.value;
}
});
});
</script>