如何创建透明的HTML按钮？ [英] How to make a transparent HTML button?

问题描述

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

I am using dreamweaver to create a website and I thought of just using Photoshop to create backgrounds. I decided to do so only because in case I'd choose to change the button name easily by just editing the codes, I could just refer to the code. If I would construct buttons using Photoshop, I wouldn't be able to edit the Texts in those buttons or in any element easily.

所以我的问题很简单，如何我创建了一个具有简单的内联样式的按钮，使其透明，使按钮的值仍然可见。

So my question is simple, How do I create a button that has a simple inline style making it transparent leaving the value of the button still visible.

.button {

            background-color: Transparent;
            background-repeat:no-repeat;
            border: none;
            cursor:pointer;
            overflow: hidden;

        }

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

It still leaves a border shade after your click it.

推荐答案

要点击时删除大纲，请添加 outline：none

To get rid of the outline when clicking, add outline:none

jsFiddle示例

jsFiddle example

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>

这篇关于如何创建透明的HTML按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！