Как сделать прозрачную кнопку HTML?

Я использую Dreamweaver для создания веб-сайта, и я думал о том, что просто использовал Photoshop для создания фонов. Я решил сделать это только потому, что в случае, если бы я решил изменить название кнопки легко, просто отредактировав коды, я мог бы просто обратиться к коду. Если бы я построил кнопки с помощью Photoshop, я бы не смог легко редактировать тексты в этих кнопках или в любом элементе.

Итак, мой вопрос прост: как создать кнопку, которая имеет простой встроенный стиль, делая ее прозрачной, оставляя значение кнопки все еще видимым.

.button {

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

        }

Он по-прежнему оставляет пограничный оттенок после нажатия на него.

Ответ 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>

Ответ 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");
}

Ответ 3

Решение довольно просто:

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

Это делает встроенный стиль. Вы определяете границу 1px, сплошную линию и черный цвет. Цвет фона затем устанавливается на прозрачный.

UPDATE

Кажется, что ваш ФАКТИЧЕСКИЙ вопрос - как вы можете предотвратить границу после нажатия на нее. Это можно решить с помощью псевдоселектора CSS: :active.

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

JSFiddle Demo

Ответ 4

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

Ответ 5

Настройка фонового изображения на none также не работает:

button {
    background-image: none;
}