当使用边界半径和背景图像时，移除颤动中Button的默认白色
。
在前端开发中，当我们使用边界半径（border-radius）和背景图像（background-image）来美化按钮（Button）时，有时会出现按钮在点击或悬停时出现颤动效果，并且默认显示为白色背景。为了移除这种颤动效果和默认白色背景，我们可以通过以下方法来实现：
- 使用CSS样式来设置按钮的外观：
- 设置按钮的边界半径为0，即border-radius: 0；
- 设置按钮的背景颜色为透明，即background-color: transparent；
- 设置按钮的背景图像为none，即background-image: none；
- 可以根据需要设置按钮的其他样式，如文字颜色、边框样式等。
- 使用CSS伪类来控制按钮的状态：
- 使用:hover伪类来设置按钮在悬停状态下的样式，如改变背景颜色、边框样式等；
- 使用:active伪类来设置按钮在点击状态下的样式，如改变背景颜色、边框样式等。
- 使用JavaScript来处理按钮的交互效果：
- 可以通过JavaScript监听按钮的点击事件，并在点击时执行相应的操作；
- 可以通过JavaScript监听按钮的悬停事件，并在悬停时执行相应的操作。
总结： 通过以上方法，我们可以移除按钮在使用边界半径和背景图像时出现的颤动效果，并且可以自定义按钮的外观和交互效果。在腾讯云的产品中，推荐使用云函数（SCF）来实现按钮的点击事件处理，使用云存储（COS）来存储按钮的背景图像，使用云开发（TCB）来部署和管理前端应用。
相关产品推荐：
- 云函数（SCF）：https://cloud.tencent.com/product/scf
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 云开发（TCB）：https://cloud.tencent.com/product/tcb
相关·内容
1回答
由Input元素实现的Button在被点击时不响应
css、huawei-developers
在开发QuickApp时，在将输入元素的类型设置为按钮并设置边框半径属性后，当点击按钮时，按钮不会按预期响应(背景颜色更改)。如果边框半径属性被删除，该按钮将再次正常工作。 <template>
<div class="page-wrapper">
<input type="button" class="button" value="Animation" />
</div>
</template>
<script>
</script&
浏览 141提问于2021-08-31得票数 1
回答已采纳
2回答
有没有可能在CSS中模仿滑门技术，让按钮不带图像
html、css、user-interface
我们使用滑动门技术在CSS的切片背景图像，如前面提到的，以创建椭圆形的按钮，具有颜色变化和按下效果。
有没有可能只使用CSS而不使用任何背景图像来做一些类似的事情？
浏览 0提问于2010-07-15得票数 0
回答已采纳
3回答
如何有3种不同的条件边框颜色？
html、css、reactjs、material-ui
我需要样式一个图标按钮与3种不同的边框颜色，一个用于常规状态，一个在悬停，另一个为当图标被点击。我正在使用function，现在我有一个函数来检查当前按钮是否是被选中的按钮，它是否适用于常规的和单击的按钮，我还添加了onHover颜色，但是如果该按钮是活动的，您无法分辨，因为在悬停接管时，在移动鼠标之前，您无法看到单击的边框。怎么做呢？
浏览 14提问于2022-07-07得票数 -2
8回答
如何在悬停时更改图像的颜色
html、css
我需要更改图像的背景颜色。图像是一个白色背景的圆形图像，我需要当您将鼠标悬停在它上面时，将圆形图像的背景更改为蓝色。我只需要改变圆圈。
我的HTML代码是
<div class="fb-icon">
<a href="http://www.facebook.com/mypage" target="_blank">
<img src="images/fb_normal.png" alt="Facebook">
</a>
</div>
在CSS中，我写道：
.
浏览 1提问于2012-01-29得票数 15
回答已采纳
2回答
按钮悬停颜色
asp.net、html、css
为清晰起见，在解析后进行编辑。
我想将按钮上方的悬停颜色从默认的蓝色更改为另一种颜色。我想做到这一点，而不必完全重新定义所有的CSS的按钮。我只想覆盖悬停颜色，保留其余的默认值。
图片：
通常，它是这样的：
悬停，是这样的：
我想要更改悬停时的突出显示颜色。
编辑：
已经尝试过：
.Cancel:hover
{
background: linear-gradient(black, white); //Tried these separately
background-color:Red;
}
和按钮标记：
<asp:Button I
浏览 3提问于2013-03-05得票数 0
回答已采纳
3回答
如何强制内联标记显示：<button>？
button、css
看看这个：
现在，当您不将鼠标悬停在它们上面时，它们看起来很好，但是当您将鼠标悬停在<button>和<input>元素上时，您会看到它们下面的文本有一点凹凸不平，而将鼠标悬停在<a>元素上则不会产生同样的效果。这是因为<button>和<input>元素仍然显示为inline-blocks (处理边框、填充和边距的方式与常规inline不同)，尽管应用了display: inline !important;行。
有什么方法可以覆盖它吗？我知道这是可以通过黑客的方式，如边框的颜色与背景等，但我真的很想知道有没有办法让他们正确的dis
浏览 1提问于2013-08-18得票数 0
2回答
如何有圆角的边框作为图像和内部背景颜色来看穿？
html、css
我有一个带有内圆角的div边框，我想用图像替换它。该图像将有不透明度，渐变和其他Photoshop效果应用到它。
我还想让内部div的背景颜色看清，这样身体的图像就是可见的。基本上我在.inner目录中寻找一个透明的背景。
JSFiddle：
这是我的HTML：
<body>
<div class="outer">
<div class="inner">
....
....
</div>
</div>
</body>
CSS：
body {
浏览 0提问于2014-07-01得票数 0
2回答
如何修改NSButton的外观以产生切换效果
macos、cocoa、nsbutton
如何修改NSButton的外观和感觉，我想要创建一个按钮，它看起来类似于NSRoundRectBezelStyle，但具有图像和自定义高度
如何改变背景颜色，在悬停时改变颜色，点击改变颜色，在状态打开或关闭时创建切换效果，创建与NSRoundRectBezelStyle相似的边框。现有的本机按钮没有与我的UI元素完全相同的UI。
UI应该如下所示，但我也想添加图片上面的文本。
此Mac按钮- Hover效应
桌面按钮-按钮对效应的影响
共享按钮-切换关闭效应
浏览 1提问于2017-07-25得票数 3
回答已采纳
2回答
检测Hover背景图像
css、hover
我有一个输入文本。我添加了一个比输入元素小的背景图像。我只想在图像上方悬停时更改图像。
这是我的css：
#inputBox2{
top:45%;
background-image:url(".\\Images\\arrow.png");
background-repeat: no-repeat;
background-size: 14% 100%;
background-position: right;
}
编辑：，我正在尝试这样做：
当我在箭头上方悬停时，我希望它改变颜色，当我点击它时，它应该提交。
浏览 4提问于2013-03-09得票数 0
回答已采纳
2回答
在QToolButton中设置边框图像时，如何设置边框颜色？
qt、stylesheet、qtstylesheets
我正在尝试创建一个具有调整大小的图像，背景颜色和边框的QToolButton。我已经成功地获得了图像(使用边框图像)和背景颜色正确显示。然而，我似乎不能让边框显示，因为它的背景颜色似乎是“覆盖”它。
我正在尝试使用Qt Creator 2.7.0和Qt 4.8.4中的样式表来做到这一点。
我的样式表是：
border-radius: 4px;
border: 2px solid red;
border-image: url(myImage) 0 0 0 0 stretch stretch;
border-repeat: no-repeat;
background-color: rgb(100,
浏览 2提问于2013-05-16得票数 1
回答已采纳
1回答
flex按钮事件处理程序
apache-flex、flex4、mouseevent
我在BorderContainer中有一些按钮，当用户单击这些按钮时，我想执行附加的事件。但是，父级也有一个单击事件。
我想在用户单击按钮A时执行动作A，在用户单击背景时执行带有按钮B的动作B和动作C。
实际上，如果我将eventHandler添加到边框容器中，按钮将不再起作用。没有鼠标光标，没有鼠标悬停效果，如果你点击它，就会启动动作C。
我的边界容器：
useHandCursor = true;
mouseChildren = false;
buttonMode = true;
在按钮和边框容器中，我都使用了MouseEvent.Click事件，并且都调用了相同的函数"click“
浏览 1提问于2013-07-02得票数 0
回答已采纳
2回答
将Qt -设置边界图像设置为QPushButton使其失去推送效果。
qt、user-interface、uibutton、qt-creator、qpushbutton
在互联网上搜索时，我找到了一种为QPushButton建立自己的图像的方法，样式表上有这一行：
border-image: url(:/Path/to/my/image.jpg) 0 0 0 0 stretch stretch;
结果有一个很好的外观，但失去了“推送效应”。
带着线
backgound-image: url(:/Path/to/my/image.jpg);
它保持了推送效果，但背景图像不像“边框图像”那样缩放到按钮的大小。
是否有一个技巧我还没有找到使它与边框图像工作，或者我必须改变我的.jpg图像的大小，以使我的按钮样式正确？
浏览 0提问于2017-03-01得票数 1
回答已采纳
3回答
哪种css样式处理按钮上的单击事件？悬停之外的其他
html、css
我看到这个网站有一个按钮，当我将鼠标悬停在它上面时，背景会发生变化。
当我单击按钮时，按钮底纹反转，即对单击事件做出反应。
这是哪种CSS样式？我知道:hover是用来悬停的，但是点击一下呢？
浏览 2提问于2010-10-16得票数 8
回答已采纳
2回答
仅适用于悬停时的边界，而不是背景。
css、hover、css-transitions、pseudo-element、pseudo-class
这里我有一些CSS:
#image-edges-beneath:hover{
background-color: blue;
}
#image-edges:hover{
background-color: blue;
}
#image-edges-beneat:hover:after{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
浏览 2提问于2013-01-18得票数 18
回答已采纳
1回答
使用jquery组合效果
jquery
我有两种不同的jquery效果，我想要应用于表单单选按钮，一边是按钮的悬停效果，另一边是选定单选按钮的背景颜色更改。代码如下：
对于悬停：
$(".label_radio").hover(function () {
$(this).css("background-color", "silver");
},function () {
$(this).css("background-color", "transparent");
});
对于所选项目：
$("#uno").click(f
浏览 1提问于2013-05-16得票数 0
回答已采纳
2回答
将C#按钮样式设置为悬停/单击/取消悬停时的另一个按钮
c#、winforms、button
当一个按钮悬停在上面时，我如何使两个按钮看起来相同？
下面是我想要显示的按钮的图片：
如何使中间带有绿色图像的按钮显示为相同的样式(颜色、边框等)？当Sign On one被悬停/单击时？
我使用的是Windows窗体。
浏览 1提问于2011-04-30得票数 0
1回答
如何为JavaFX中的按钮创建具有半透明背景的圆形边框？
css、javafx-8
我想在JavaFX (而不是html)中创建这样的按钮。
(悬停在他们身上看效果)
愚蠢的Stackoverflow坚持让我在这里发布jsfiddle代码，这与<li><a href="/help/2/">Button 1</a></li>
所以有一个圆形的边框和透明的背景。不幸的是，后台/嵌入技术似乎覆盖了从外部到in的内容。因此，如果你画一个明亮的边框，那么你就不能取消亮度来创建一个黑暗和透明的背景，不硬编码的颜色。也就是说，它不是写一次，到处跑，在不同的彩色面板上。
-fx-边框颜色似乎不支持四舍五入，或者至少这里不推荐。
浏览 7提问于2014-05-21得票数 0
回答已采纳
1回答
从中心展开背景(CSS / Javascript)
jquery、css、css-transitions
请注意，下面的例子有音乐自动播放！如果您希望将扬声器静音，请在访问示例之前执行此操作。
我正在重新创建，它最初是在flash中完成的。基本上在flash站点上，有5个主要按钮，‘发现’，‘体验’，‘驻留’，‘互动’和‘连接’。将鼠标悬停在这些按钮上时，当底部边框从中心向外扩展时，背景会略有变化。
我不介意将背景设置为图像或使用边框来指示颜色。基于我在这里所做的，我想象为悬停效果和正常状态设置背景图像是最简单的。我想让背景图像在悬停时转换成新的图像，但要让它从中心而不是从左到右或从右到左扩展。
这是不是我可以通过CSS转换或者jQuery来实现的？
谢谢!
浏览 0提问于2013-04-22得票数 1
回答已采纳
3回答
移动设备上的提交按钮在单击后未松开焦点
javascript、jquery、html、css、ajax
我有一个追随者，但在我的网站上，当点击更新数据库通过ajax。
成功返回后，我更改了按钮的类，以显示不同的背景色。
这在桌面上很有效，但在移动设备上提交按钮仍然是活动的/具有悬停操作。
当悬停提交时，我有一个仅用css :hover改变背景颜色的hover事件。
div的颜色与悬停时的颜色相同，但在ajax响应更改了类之后。
希望到目前为止这是有意义的。
所以我在表单中有一个提交：
<form>
<input type="submit" id="followsubmit" class="followbuttonNO">
浏览 3提问于2014-06-17得票数 0
1回答
Pygtk:更改小部件的边框颜色
colors、gtk、pygtk、border、shadow
我到处都找过了，但似乎找不到改变边框颜色的方法。例如，我需要一个这样的按钮：
gb = gtk.Button("Hi")
gb.set_border_width(50)
现在我希望将边框涂成红色(这是一个不存在的调用)：
gb.set_border_color('red')
我试过gb.modify_bg(...)但它只改变按钮的背景，而不改变它周围的边框。我所能做的就是将这个GtkButton添加到一个GtkFrame中，并使用帧的阴影颜色。然而，阴影框的宽度是固定的-它是一条比我想要的厚度小得多的细线。
我的直觉是，如果你可以改变边框的宽度，你应该能够在它上
浏览 2提问于2011-04-28得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
