web-dev-qa-db-fra.com

Css bouton appuyant effet

J'ai un bouton avec une zone d'ombre qui donne l'impression qu'il flotte, et j'aimerais créer un effet pressant lorsque je clique dessus:

Code (CSS):

#startBtn
{
    font-family: OpenSans;
    color: #FFFFFF;
    background-color: #00FF7C;
    border: 1px solid #00FF7C;
    border-radius: 5px;
    box-shadow: 0px 5px 0px #00823F;
}

Code (HTML):

<input type="button" id="startBtn" value="Let's begin">

Capture d'écran:

 Button

htmlcssanimationbuttoninput
14
Jojo01

Utilisez la pseudo-classe :active et modifiez la valeur de décalage vertical de box-shadow. Ajustez la valeur top de l'élément activé par rapport à l'entrée relative positionnée avec parent absolu.

.button {
  position: absolute;
}
#startBtn {
  font-family: OpenSans;
  color: #FFFFFF;
  background-color: #00FF7C;
  border: 1px solid #00FF7C;
  border-radius: 5px;
  box-shadow: 0px 5px 0px #00823F;
  position: relative;
  top: 0px;
  transition: all ease 0.3s;
}
#startBtn:active {
  box-shadow: 0 3px 0 #00823F;
  top: 3px;
}
<div class="button">
  <input type="button" id="startBtn" value="Let's begin">
</div>

32
Manoj Kumar

SI les fesses ont une hauteur fixe (comme il se présente), je placerais le fessier dans un div de cette hauteur et placerais le bouton en position absolue pour créer le bon effet (en le déplaçant vers le bas) avec:

#startBtn:active {
  box-shadow: 0 1px 0 #00823F;
    bottom:-4px;
}

JSFIDDLE

4
Alvaro Menéndez

Vous pouvez utiliser la propriété CSS hover:

#startBtn:hover { 
  /* your css code here */ 
}

Une autre option consiste à utiliser des générateurs de boutons tels que buttongarage.in pour générer votre code pour le bouton et l'effet de survol.

0
Siddu