如何制作透明的HTML按钮?


123

我正在使用Dreamweaver创建网站,并且想到了仅使用Photoshop创建背景。我之所以决定这样做,是因为如果我只想通过编辑代码来轻松更改按钮名称,就可以引用该代码。如果我要使用Photoshop构造按钮,将无法轻松地在这些按钮或任何元素中编辑文本。

所以我的问题很简单,即如何创建具有简单内联样式的按钮,使其变得透明,使按钮的值仍然可见。

.button {     
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;        
}

单击它后仍留下边框阴影。


Answers:


238

要在单击时摆脱轮廓,请添加 outline:none

jsFiddle示例

button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}


这实际上已经足够了。我已经尝试过图像方式,并且确实按照需要进行了操作。非常感谢,海斯先生!
Shinji 2014年

1
包含-webkit-box-shadow: none; -moz-box-shadow: none;在代码中之后,它可以100%工作
h3nr1ke

6
您可以将其优化background-color: Transparent; background-repeat:no-repeat;background: Transparent no-repeat;
Filipe Amaral

1
失踪outline: none;让我每一次
亚当

4

实际上,该解决方案非常简单:

<button style="border:1px solid black; background-color: transparent;">Test</button>

这是一种内联样式。您将边框定义为1px,实线和黑色。然后将背景色设置为透明。


更新

似乎您的ACTUAL问题是单击边框后如何防止边框。可以使用CSS伪选择器来解决:active

button {
    border: none;
    background-color: transparent;
    outline: none;
}
button:focus {
    border: none;
}

JSFiddle演示


单击它后仍留下边框阴影。谢谢您的意见!
Shinji 2014年

因此,您的实际问题与我回答的原始问题有很大不同。您已经知道如何使用CSS来使按钮透明。单击后,将留下您不需要的边框。准确吗?
EnigmaRM 2014年

是的,如果我的问题引起误解,我感到非常抱歉。
Shinji 2014年

2

创建一个div并将您的图片(具有透明背景的png)用作div的背景,然后您可以将该div中的任何文本应用于鼠标悬停在按钮上。像这样:

<div class="button" onclick="yourbuttonclickfunction();" >
Your Button Label Here
</div>

CSS:

.button {
height:20px;
width:40px;
background: url("yourimage.png");
}

如果要保持html的语义和可访问性,则最好使用按钮标记并删除背景等。使用CSS。然而,这是好的,特别是在一个情况下可访问性并不像本机应用程序的问题,使用HTML5和CSS布局,这里有一个例子:smashingmagazine.com/2013/10/17/...
埃里克Bishard

0
<div class="button_style">
This is your button value
</div>

.button_style{   
background-color: Transparent;
border: none;             /* Your can add different style/properties of button Here*/
cursor:pointer;    
}


0

**像这样添加图标顶部按钮**

#copy_btn{
	align-items: center;
	position: absolute;
	width: 30px;
  height: 30px;
     background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}
.icon_copy{
	position: absolute;
	padding: 0px;
	top:0;
	left: 0;
width: 25px;
  height: 35px;
  
}
<button id="copy_btn">

                        <img class="icon_copy" src="./assest/copy.svg" alt="Copy Text">
</button>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.