animation bouton en cercle

stalker069
Les bases HTML/CSS

Bonjour,

Je souhaiterai faire un bouton qui s'ouvre mais je n'arrive pas à voir comment faire en CSS3

En gros je veux un rond de couleur (style une puce) une fois en hover je veux que mon cercle s'agrandisse et laisse apparraitre un texte
Voici ma photo d'exemple : https://ibb.co/ip9Rfv

Merci pour votre aide
Cordialement,

3 réponses

tomazn

Bonjour,
Je te propose une solution ici: https://codepen.io/anon/pen/VWjKbj
Je te laisse ajuster tes paramètres selon ce que tu souhaites, n'hésite pas à demander si tu ne comprends pas un truc.

JeremieMeunier

Bonjour,

L'idée de tomazn est pas mal mais je ferais plus comme ça :

.circle{
  background-color:#424242;
  display: flex;
  justify-content:center;
  align-content:center;
  flex-direction:column;
  border-radius: 35px;
  width: 35px;
  height: 35px;
  transition: all 1s;
}

.mon_text{
  opacity:0;
  color:#FFF;
  text-align:center;
  transition: all 1s;
}

.circle:hover{
  width:200px;
}

.circle:hover > .mon_text{
  opacity:1;
}

<a href="" class="circle">
<span class="mon_text">
blablabla
</span>
</a>

pierre jocelyn andre

Bonjour,
Je pense que la solution de JeremieMeunier est interessante.
J'utilise dans MOOC Lecjoa la technique dessous pour faire apparaitre et disparaitre les images au bon moment afin de générer les vidéo
.cachemoi {
display: none;
}
.sortdutrou {
display: inline;
}

Cordialement