如何制作透明的HTML按钮？

Question

我正在使用Dreamweaver创建网站，考虑只使用Photoshop来创建背景。我这样做是因为如果我选择轻松通过编辑代码来更改按钮名称，我可以直接参考代码。如果我使用Photoshop构建按钮，则无法轻松地编辑这些按钮或任何元素中的文本。

所以我的问题很简单，如何创建一个具有简单内联样式的按钮，使其透明，同时保留按钮上的文本可见。

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

点击后仍会留下边框阴影。

- Shinji

---

可能是HTML CSS隐形按钮的重复问题。 - Dryden Long

Answer 1

为了在点击时取消边框，请添加outline:none。 JSFiddle示例

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

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

<button>button</button>

- j08691

---

这已经足够好了。我已经尝试过图像方式，它完全符合需求。非常感谢您，海斯先生！ - Shinji

在代码中包含“-webkit-box-shadow: none; -moz-box-shadow: none;”后，它可以100%正常工作。 - h3nr1ke

你可以将 background-color: Transparent; background-repeat:no-repeat; 改为 background: Transparent no-repeat; 来进行优化。 - Filipe Amaral

缺少 outline: none; 每次都会让我出错。 - Adam

对我来说，我必须将属性“cursor: pointer”应用于button:hover。仅使用button是不起作用的。 - Spixmaster

Answer 2

解决方案其实很简单：

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

这是进行内联样式。您正在定义边框为1像素、实线，颜色为黑色。然后将背景颜色设置为透明。

---

更新

看起来你实际上的问题是如何防止点击后出现边框。这可以通过CSS伪选择器:active来解决。

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

JSFiddle Demo

- EnigmaRM

---

点击后仍然会留下边框阴影。感谢您的输入！ - Shinji

所以，你实际上的问题与我最初回答的问题非常不同。你已经知道如何使用CSS使按钮透明。但是在点击后，它留下了一个你不想要的边框。这准确吗？ - EnigmaRM

是的，如果我的问题有误导之处，我非常抱歉。 - Shinji

Answer 3

创建一个div并使用您的图像（带透明背景的png格式）作为div的背景，然后您可以在该div内应用任何文本以悬停在按钮上。类似这样：

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

CSS：

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

- Gary Hayes

---

如果您想保持HTML的语义和可访问性，最好使用按钮标签，并使用CSS删除背景等。然而，在不需要考虑可访问性的情况下，比如使用HTML5和CSS进行布局的本地应用程序，这也是可以的。以下是一个例子： http://www.smashingmagazine.com/2013/10/17/best-of-both-worlds-mixing-html5-native-code/ - Eric Bishard

Answer 4

**添加像这样的图标按钮**

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

- Omar bakhsh

Answer 5

将其背景图像设置为“无”也可以起作用。

button {
    background-image: none;
}

- javier_domenech

Answer 6

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

- user3917930