正文 

当前位置： 首页 > 问答 >

Css按钮按下效果[重复]

     2023-03-05     46

关键词：

【中文标题】Css按钮按下效果[重复]【英文标题】：Css button pressing effect [duplicate] 【发布时间】：2015-12-04 06:14:49 【问题描述】：

我有一个带有盒子阴影的按钮，使它看起来像在浮动，我想在单击它时产生一种按下效果：

代码（CSS）：

#startBtn

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

代码（HTML）：

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

截图：

【问题讨论】：

看看这个例子：https://www.w3schools.com/code/tryit.asp?filename=GJKQEYQ8AXA8. 【参考方案1】：

使用:active 伪类并更改box-shadow 垂直偏移值。相对于绝对父级的相对定位输入，调整激活元素的top 值。

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

【讨论】：

谢谢，但我也希望按钮向下移动。 您可以更改高度值使其看起来向下。 看看这个网站右上角的按钮：suomi24.fi 代码随转换更新。 谢谢，这很有帮助。【参考方案2】：

如果按钮具有固定的高度（看起来），我会将按钮包装到具有该高度的 div 中，并将按钮设置为绝对位置以创建正确的效果（向下移动）：

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

JSFIDDLE

【讨论】：

【参考方案3】：

您可以使用 CSS hover 属性：

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

另一种选择是使用像 buttongarage.in 这样的按钮生成器来为按钮和悬停效果生成代码。

【讨论】：

buttongarage.in 现在似乎已损坏（2019-02）

纯css实现3d按钮效果

今天分享一个用纯CSS实现的3D按钮。css巧妙利用了box-shadow来实现3D物体的立体感，当按钮按下的时候再去修改box-shadow和top值。让人感觉有一种按钮被按下的感觉。css代码非常少，如下所示a.css-3d-btn{position:relative;color:rgba(255,255,255,... 查看详情

按下按钮时播放随机声音[重复]

】按下按钮时播放随机声音[重复]【英文标题】：Randomsoundplayswhenpressingabutton[duplicate]【发布时间】：2012-11-2814:28:47【问题描述】：可能重复：playingRandomsoundsonasoundboardapp我正在尝试制作一个应用程序，当我按下按钮时，它每次都... 查看详情

使用 JS 脚本单击按钮（CSS）[重复]

】使用JS脚本单击按钮（CSS）[重复]【英文标题】：clickbutton(CSS)usingJSscript[duplicate]【发布时间】：2021-12-2707:30:33【问题描述】：我正在制作一个西蒙说游戏，我使用4个颜色完美的按钮。这个过程很简单——程序向用户展示颜色。... 查看详情

检测按下哪个按钮来打开此视图[重复]

】检测按下哪个按钮来打开此视图[重复]【英文标题】：Detectwhichbuttonwaspressedtoopenthisview[duplicate]【发布时间】：2013-01-2621:51:34【问题描述】：可能重复：Passingvariablesbetweenviewcontrollers假设我在同一个ViewController(FirstController)中有3... 查看详情

按下按钮到另一个页面Tkinter [重复]

】按下按钮到另一个页面Tkinter[重复]【英文标题】：PressbuttontoanotherpagesTkinter[duplicate]【发布时间】：2021-08-1710:48:28【问题描述】：如果我想要一个页面，当我输入一个值并按下按钮时它会更改/切换到另一个页面，那么编码如何... 查看详情

使用 Tkinter 按下按钮后更新标签 [重复]

】使用Tkinter按下按钮后更新标签[重复]【英文标题】：UpdatingLabelAfterButtonPresswithTkinter[duplicate]【发布时间】：2020-10-2106:51:59【问题描述】：我对Python很陌生。作为学习Tkinter以应用于其他项目的一种方式，我想创建一些东西，在... 查看详情

当我按下特定按钮时关闭上一个窗口[重复]

】当我按下特定按钮时关闭上一个窗口[重复]【英文标题】：CloseapreviouswindowwhenIpressaspecificbutton[duplicate]【发布时间】：2018-08-2921:45:27【问题描述】：当我在java中按下特定按钮时关闭上一个窗口我该怎么做ImeanafterIclickontheregistrati... 查看详情

JAVA按下按钮并等待几秒钟[重复]

】JAVA按下按钮并等待几秒钟[重复]【英文标题】：JAVApressbuttonandwaitsomeseconds[duplicate]【发布时间】：2016-10-1222:29:50【问题描述】：一个问题：有一个带有单个按钮的简单GUI应用程序，当我按下按钮时它应该打印一条消息，2秒后它... 查看详情

用户按下按钮时弹出日期选择器[重复]

】用户按下按钮时弹出日期选择器[重复]【英文标题】：Popupdatepickerwhenuserpressesabutton[duplicate]【发布时间】：2013-03-2523:19:22【问题描述】：我是ios的初学者，请帮助我如何在用户按下按钮时显示弹出日历。我已经在下面有我的按... 查看详情

如何消除“按下按钮”效果并使按钮在点击时变平

】如何消除“按下按钮”效果并使按钮在点击时变平【英文标题】：Howtoremove\'pressbutton\'effectandmakebuttonflatevenonclick【发布时间】：2015-10-0623:00:39【问题描述】：我有以下样式的按钮buttonbackground:none;border-color:#87db41;color:#87db41;paddin... 查看详情

通过滑动手指按下按钮（用于钢琴效果）

】通过滑动手指按下按钮（用于钢琴效果）【英文标题】：Pressbuttonsbyswipingfinger(forpianoeffect)【发布时间】：2013-06-0803:53:53【问题描述】：我正在创建一个类似于钢琴的应用程序，其中每个按钮都会播放一个音符。我的UIButtons在To... 查看详情

Android Fragment句柄后退按钮按下[重复]

】AndroidFragment句柄后退按钮按下[重复]【英文标题】：AndroidFragmenthandlebackbuttonpress[duplicate]【发布时间】：2011-12-2023:45:09【问题描述】：我的活动中有一些片段[1],[2],[3],[4],[5],[6]如果当前活动片段为[2]，则在返回按钮上按I必须从[2... 查看详情

确定按钮阵列中的最后一次按下[重复]

】确定按钮阵列中的最后一次按下[重复]【英文标题】：Determinelastpressedinbuttonarray[duplicate]【发布时间】：2018-05-0505:54:51【问题描述】：我对Web开发非常陌生（来自AV控制系统编程背景），并且正在尝试做一些我确信必须非常简单... 查看详情

如何在按下按钮后每 10 分钟重复一次方法并在按下另一个按钮时结束它

】如何在按下按钮后每10分钟重复一次方法并在按下另一个按钮时结束它【英文标题】：HowdoIrepeatamethodevery10minutesafterabuttonpressandenditonanotherbuttonpress【发布时间】：2012-04-3014:36:27【问题描述】：我正在编写一个Android应用程序，它... 查看详情

按下按钮时如何在 lua 脚本中停止重复？

】按下按钮时如何在lua脚本中停止重复？【英文标题】：doesanyoneknowhowtostoprepeatinluascriptwhenbuttonispressed?有谁知道【发布时间】：2022-01-0115:59:28【问题描述】：所以我目前正在为游戏编写一个快速射击脚本。这是我得到的EnablePrimar... 查看详情

波纹效果在角落泄漏，好像可按下按钮有一个borderRadius

】波纹效果在角落泄漏，好像可按下按钮有一个borderRadius【英文标题】：rippleeffectleakingatcornersasifPressablebuttonhasaborderRadius【发布时间】：2020-11-1219:41:56【问题描述】：在参考此文档pressabledocs后，我将Pressable用于按钮现在我想为... 查看详情

通过两个按钮放大/缩小页面文本[重复]

】通过两个按钮放大/缩小页面文本[重复]【英文标题】：Magnify/de-magnifypagetextviatwobuttons[duplicate]【发布时间】：2016-12-3010:21:13【问题描述】：我试图在网上找到解决问题的方法，但徒劳无功。我有两个按钮，一个是+符号，另一个... 查看详情

由于nil，Swift iOS [重复]，按下按钮时无法播放声音

】由于nil，SwiftiOS[重复]，按下按钮时无法播放声音【英文标题】：Cannotplaysoundwhenbuttonispressedbecauseofnil,SwiftiOS[duplicate]【发布时间】：2016-03-0421:52:44【问题描述】：我正在尝试在Swift中按下A按钮时创建声音。由于我不知道该怎么... 查看详情