logo标签列表

点击CSS按钮效果

htmlcssbuttononclick
19

我正在创建一个CSS按钮，尝试实现一个点击效果：当用户点击按钮时，它会将按钮文本向下推1px。我的问题在于它会将整个按钮底部都推下去。你会如何解决这个问题？

<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;
}
实际的点击功能需要使用JavaScript/jQuery来产生永久的效果。 - Paulie_D
5个回答
21

您应该应用以下样式：

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

这将为您提供必要的效果，在此处进行演示。

9
按下整个按钮。我建议这样做，因为它在按钮上看起来很漂亮。 
#button:active {
    position: relative;
    top: 1px;
}

如果你只想推动文本，则增加顶部填充并减少底部填充。您还可以使用行高。

6

这是一个我制作的按下按钮示例：

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

尽情享受吧！

这个很棒，除了在我的特定设置中，在Chrome中，它突然在过渡期间对(8pt)文本进行抗锯齿处理，并在完成后取消抗锯齿处理，看起来有点奇怪。除此之外，CSS的使用非常有创意！ - A.B. Carroll
1

JS提供了正确的工具来实现这一点。尝试演示片段。

enter image description here

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>

0

你可以玩弄新野蛮主义的概念。

方法如下：

Add an active class that changes the position and the shadow simultaneously to give you the effect. 

.btn {
  padding: 10px;
  width: fit-content;
  background-color: white;
  border: solid 1px blue;
  box-shadow: 10px 10px 0px 0 blue;
  font-family: inherit;


}
.btn:active {
    position: relative;
    top: 2px;
    box-shadow: 9px 8px 0 0 blue;
  }
<button class="btn">GET A QUESTION</button>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接