Onclick CSS Button-Effekt

Question

Ich erstelle eine CSS-Schaltfläche und ich versuche, einen onclick-Effekt zu machen: wenn der Benutzer auf die Schaltfläche klickt, würde er den Button-Text um 1px nach unten drücken. Mein Problem hier ist, dass es die ganze Unterseite des Knopfes drückt. Wie würdest du vorgehen?

<div class="one"> 
    <p><a id="button" href=#>Button</a></p> 
</div> 

Hier ist die CSS:

#button { 
    display: block; 
    width:150px; 
    margin:10px auto; 
    padding:7px 13px; 
    text-align:center; 
    background:#a2bb33; 
    font-size:20px; 
    font-family: 'Arial', sans-serif; 
    color:#ffffff; 
    white-space: nowrap; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 

} 

#button:active { 
    vertical-align: top; 
    padding-top: 8px; 
} 

.one a { 
    text-decoration: none; 
} 

Answer 1

Sie sollten die folgenden Arten anwenden:

#button:active { 
    vertical-align: top; 
    padding: 8px 13px 6px; 
} 

Dies gibt Ihnen die nötige Wirkung, Demo here.

Answer 2

Drücken Sie den gesamten Knopf nach unten. Ich schlage vor, dass es im Knopf schön aussieht.

#button:active { 
    position: relative; 
    top: 1px; 
} 

Wenn Sie nur Text pushen möchten, erhöhen Sie die obere Füllung und verringern Sie die untere Polsterung. Sie können auch Zeilenhöhe verwenden.

Answer 3

Dies ist eine nach unten drücken Taste Beispiel die ich gemacht habe:

<div> 
    <form id="forminput" action="action" method="POST"> 
     ... 
    </form> 
    <div style="right: 0px;bottom: 0px;position: fixed;" class="thumbnail"> 
     <div class="image"> 
      <a onclick="document.getElementById('forminput').submit();"> 
       <img src="images/button.png" alt="Some awesome text"> 
      </a> 
     </div> 
    </div> 
</div> 

die CSS-Datei:

.thumbnail { 
    width: 128px; 
    height: 128px; 
} 

.image { 
    width: 100%; 
    height: 100%;  
} 

.image img { 
    -webkit-transition: all .25s ease; /* Safari and Chrome */ 
    -moz-transition: all .25s ease; /* Firefox */ 
    -ms-transition: all .25s ease; /* IE 9 */ 
    -o-transition: all .25s ease; /* Opera */ 
    transition: all .25s ease; 
    max-width: 100%; 
    max-height: 100%; 
} 

.image:hover img { 
    -webkit-transform:scale(1.05); /* Safari and Chrome */ 
    -moz-transform:scale(1.05); /* Firefox */ 
    -ms-transform:scale(1.05); /* IE 9 */ 
    -o-transform:scale(1.05); /* Opera */ 
    transform:scale(1.05); 
} 

.image:active img { 
    -webkit-transform:scale(.95); /* Safari and Chrome */ 
    -moz-transform:scale(.95); /* Firefox */ 
    -ms-transform:scale(.95); /* IE 9 */ 
    -o-transform:scale(.95); /* Opera */ 
    transform:scale(.95); 
} 

Genießen Sie es!

Answer 4

JS bietet die Tools, um dies richtig zu machen. Probieren Sie das Demo-Snippet aus.

var doc = document; 
 
var buttons = doc.getElementsByTagName('button'); 
 
var button = buttons[0]; 
 

 
button.addEventListener("mouseover", function(){ 
 
    this.classList.add('mouse-over'); 
 
}); 
 

 
button.addEventListener("mouseout", function(){ 
 
    this.classList.remove('mouse-over'); 
 
}); 
 

 
button.addEventListener("mousedown", function(){ 
 
    this.classList.add('mouse-down'); 
 
}); 
 

 
button.addEventListener("mouseup", function(){ 
 
    this.classList.remove('mouse-down'); 
 
    alert('Button Clicked!'); 
 
}); 
 

 
//this is unrelated to button styling. It centers the button. 
 
var box = doc.getElementById('box'); 
 
var boxHeight = window.innerHeight; 
 
box.style.height = boxHeight + 'px';

button{ 
 
    text-transform: uppercase; 
 
    background-color:rgba(66, 66, 66,0.3); 
 
    border:none; 
 
    font-size:4em; 
 
    color:white; 
 
    -webkit-box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.33); 
 
    -moz-box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.33); 
 
    box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.33); 
 
} 
 
button:focus { 
 
    outline:0; 
 
} 
 
.mouse-over{ 
 
    background-color:rgba(66, 66, 66,0.34); 
 
} 
 
.mouse-down{ 
 
    -webkit-box-shadow: 0px 6px 5px -4px rgba(0,0,0,0.52); 
 
    -moz-box-shadow: 0px 6px 5px -4px rgba(0,0,0,0.52); 
 
    box-shadow: 0px 6px 5px -4px rgba(0,0,0,0.52);     
 
} 
 

 
/* unrelated to button styling */ 
 
#box { 
 
    display: flex; 
 
    flex-flow: row nowrap ; 
 
    justify-content: center; 
 
    align-content: center; 
 
    align-items: center; 
 
    width:100%; 
 
} 
 

 
button { 
 
    order:1; 
 
    flex: 0 1 auto; 
 
    align-self: auto; 
 
    min-width: 0; 
 
    min-height: auto; 
 
}    
 

 

 

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset=utf-8 /> 
 
    <meta name="description" content="3d Button Configuration" /> 
 
    </head> 
 

 
    <body> 
 
    <section id="box"> 
 
     <button> 
 
     Submit 
 
     </button> 
 
    </section> 
 
    </body> 
 
</html>