Onclick CSS按钮效果

我正在创建一个CSS按钮，我试图做出一个onclick效果：当用户点击按钮时，它会按下按钮文本1px。我的问题在于它推动了按钮的整个底部。你将如何继续？Onclick CSS按钮效果

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

这里的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; 
}

来源

2014-01-23 Kimberley Furson

实际点击功能需要永久效果的JavaScript/jQuery的。 –

您应该应用以下样式：

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

这会给你必要的效果，演示here。

来源

2014-01-23 15:16:41

按下整个按钮。我建议这在按钮上看起来不错。

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

如果你只是想推文字增加顶部填充和减少底部填充。您也可以使用行高。

来源

2014-01-23 15:39:49 Zuhair

这是一个按下按钮的例子我做：

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

CSS文件：

.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); 
}

享受吧！

来源

2014-11-21 09:05:53

这会很棒，除了我在Chrome中的特定设置的任何原因，它会在转换过程中突然反转（8pt）文本，并在完成时删除反锯齿，这看起来有点奇怪。否则真正创造性地使用CSS！ –

JS提供了以正确方式执行此操作的工具。试试演示片段。

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>

来源

2016-07-18 05:05:28

Onclick CSS按钮效果

回答

相关问题