it-swarm.com.de

Css-Taste drücken Effekt

Ich habe einen Button mit einem Box-Schatten, der den Eindruck hat, als würde er schweben, und ich möchte beim Drücken einen Druckeffekt erzeugen:

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">

Bildschirmfoto:

 Button

14
Jojo01

Verwenden Sie die :active-Pseudoklasse und ändern Sie den vertikalen Versatzwert des Box-Shadows. Passen Sie den top-Wert für das aktivierte Element in Bezug auf die relativ positionierte Eingabe mit absolutem übergeordneten Element an.

.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

Wenn die Knöpfe eine feste Höhe haben (wie es aussieht), würde ich den Knopf in ein Div mit dieser Höhe einwickeln und die Schaltfläche auf absolute Position setzen, um den richtigen Effekt zu erzeugen (nach unten verschieben):

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

JSFIDDLE

4

Sie können die CSS-Eigenschaft hover verwenden:

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

Eine andere Option ist die Verwendung von Tastengeneratoren wie buttongarage.in , um Ihren Code für die Schaltfläche und den Hover-Effekt zu generieren.

0
Siddu