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

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

Как создать раскрывающуюся панель навигации с помощью HTML и CSS — Выпадающее меню

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

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

После того, как вы щелкнете по нему, он по-прежнему оставляет границу тени.

  • возможный дубликат невидимой кнопки HTML CSS

Чтобы избавиться от контура при нажатии, добавьте outline:none

jsFiddle пример

  • На самом деле этого достаточно. Я уже пробовал имиджевый способ, и он сделал именно то, что нужно. Большое вам спасибо, мистер Хейс!
  • 1 Работает на 100% после включения -webkit-box-shadow: none; -moz-box-shadow: none; в коде
  • 6 Вы можете оптимизировать его, изменив background-color: Transparent; background-repeat:no-repeat; к background: Transparent no-repeat;
  • 1 отсутствует outline: none; получает меня каждый раз
  • Мне пришлось применить свойство «cursor: pointer» к кнопке: hover. Одной кнопкой не работало.

На самом деле решение довольно простое:

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

ОБНОВИТЬ

Похоже, ваш АКТУАЛЬНЫЙ вопрос заключается в том, как предотвратить границу после нажатия на нее. Это можно решить с помощью псевдоселектора CSS: :active .

Демо JSFiddle

  • По-прежнему оставляет границу тени после того, как вы ее щелкнули. Спасибо за ваш вклад!
  • Итак, ваш настоящий вопрос сильно отличается от исходного, на который я ответил. Вы уже знаете, как использовать CSS, чтобы сделать кнопку прозрачной. После того, как он был нажат, он оставляет ненужную границу. Это точно?
  • Да, мне очень жаль, если мой вопрос вводил в заблуждение.

Создайте div и используйте свое изображение (png с прозрачным фоном) в качестве фона для div, затем вы можете применить любой текст в этом div, чтобы навести курсор на кнопку. Что-то вроде этого:

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

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

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

Он все еще оставляет границу тени после того, как вы щелкнете по ней.

6 ответов

Чтобы избавиться от контура при нажатии, добавьте outline:none

** добавьте верхнюю кнопку значка, как это **

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

Создайте div и используйте свое изображение (png с прозрачным фоном) в качестве фона для div, затем вы можете применить любой текст внутри этого div, чтобы навести курсор на кнопку. Что-то вроде этого:

На самом деле решение довольно простое:

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

ОБНОВЛЕНИЕ

Похоже, ваш АКТУАЛЬНЫЙ вопрос заключается в том, как предотвратить границу после нажатия на нее. Эту проблему можно решить с помощью псевдоселектора CSS: :active .

Верстка прозрачной формы входа

Верстка прозрачной формы входа

Представьте, что вы начинающий верстальщик и перед вами стоит задача сверстать прозрачную форму входа на фоне изображения. Дизайнеры часто используют такие комбинации на сайтах с авторизацией, поэтому неплохо было бы знать как это делается.

Верстка прозрачной формы входа.

HTML код

Я не присваивал тегам никаких классов, так как мы имеем дело только с фрагментом сайта и можем себе это позволить. При верстки целого сайта, без классов не обойтись.

Верстка прозрачной формы входа.

Делать HTML разметку, одно сплошное удовольствие — это как разминка перед стартом, чего не скажешь про CSS. Надо много поработать, чтобы получить такую красоту.

CSS код формы входа

Для всех элементов пропишем свойство:

чтобы на заданную ширину формы 400 пикселей, не влияли бордеры, марджины и паддинги, в противном случае размеры формы выйдут из под контроля.

В качестве фона для всей секции будет большая фотография, которая займет собой все пространство — cover и не будет повторяться — no-repeat.

body <
background: url(https://cdn.pixabay.com/photo/2017/06/12/17/54/anemone-2396299_1280.jpg);
background-repeat: no-repeat;
background-size: cover;
>

Прозрачный бокс (section)для формы входа

Эта строчка задает черный цвет фона формы (0,0,0) и степень прозрачности, значение (.6) делает ее полупрозрачной.

section <
background: rgba( 0,0,0,.6);

Код ниже отвечает за местонахождение бокса относительно окна браузера. В нашем случае бокс позиционирован точно по центру.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Верстка прозрачной формы входа.

Стилизуем заголовок (h2)

Цвет, размер, название шрифта, необходимые отступы, определяются по PSD макету, ставит заголовок по центру свойство — text-align: center.

section h2 <
color: #fff;
font-family: &#039;Caveat&#039;, sans-serif;
font-size: 30px;
margin: 0 0 30px;
padding: 0;
text-align: center;
>

Стилизуем поля ввода (input)

В макете поля ввода нарисованы не типично, мы видим простые две линии, как в школьной тетрадке. Эти линии — нижнии рамки белого цвета и прозрачный фон у input-ов. Остальным рамкам выставлен border: none.

section div input <
background: transparent;
border: none;
border-bottom: 1px solid #fff;
>

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

Метки полей ввода (label)

Псевдоэлементы :focus и :valid

При вводе в форму пользователя логина и пароля, метки (login, password) будут мешаться. Поэтому в момент, когда input будет в фокусе, метки сдвинутся вверх.

section div input:focus

label,
section div input:valid

Верстка прозрачной формы входа.

"В моём видеокурсе" вы увидите реальный пример адаптивной верстки по макету.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 1 ):

у меня с прозрачностью rgba(0,0,0,.6) по чему-то не срабатывало, получилось только с полным значением 0.6, т.е. (0,0,0,0.6), а в остальном спасибо за урок очень познавательно.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Добавить комментарий

Ваш адрес email не будет опубликован.