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

Полупрозрачные кнопки

Полупрозрачные кнопки

Использование фотографий в качестве фона является сейчас «горячим» трендом в веб-дизайне. Вместе с этим в веб-дизайне стало модно использовать «кнопки-призраки», которые выглядят вот так:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

А также «кнопки-призраки» могут быть приняты просто за выделенный текст. Другими словами, они не всегда могут показаться «кликабельными» для пользователей. Это основные проблемы с их использованием в плане юзабилити.

С другой стороны, «кнопка-призрак» классно смотрится на фоне фотографий благодаря своей прозрачности. Как же нам сохранить это преимущество «кнопки-призрака» и одновременно показать ее предназначение (аффорданс)?

Я обнаружил хорошее решение на главной странице сайта Tumblr. На сайте Tumblr используется полупрозрачная кнопка для авторизации поверх фона с изображением:

Это отличный компромисс между «кнопкой-призраком» и традиционной кнопкой со сплошным фоном. Благодаря полупрозрачному фону некоторые фотографии просвечивают сквозь подобные кнопки, создавая привлекательный эффект, похожий на эффект от использования «кнопок-призраков».

Классическая форма кнопки визуально сигнализирует о том, что полупрозрачная кнопка является кликабельной. Полупрозрачные кнопки очень легко создаются. Все, что нам нужно, – это немного HTML и CSS.

В разметке нам потребуется только один HTML элемент. В данном случае используется элемент <a>.

Простые прозрачные кнопки Ghost на CSS

Простые прозрачные кнопки Ghost на CSS

Мы также добавим простые эффекты наведения, чтобы наша кнопка Ghost давала визуальную обратную связь пользователю при нажатии. Трюк здесь заключается в том, чтобы удалить текстовое оформление ссылок по умолчанию, добавить тонкие границы и определить некоторое дополнение, чтобы оно выглядело как прямоугольная кнопка. При наведении мы можем просто заполнить кнопку цветом, чтобы дать зрителям обратную связь.

Установка стандартная, где можно пременить на различных функциях.

.raminu_gulam <
color: #0a8626;
background: #fff;
border: 1px solid #046918;
font-size: 15px;
padding: 9px 5px 9px 12px;
font-weight: normal;
margin: 6px 0;
margin-right: 10px;
display: inline-block;
text-decoration: none;
font-family: ‘Open Sans’, sans-serif;
min-width: 135px;
border-radius: 3px;
>

.raminu_gulam:hover, .raminu_gulam:active <
color:#fdf9f9;
background:#086319;
>

Теперь вы можете поменять кардинально дизайн.

Также можно вместо кнопки можно вывести одно название с красивым эффектом, что на некоторых сайта будет более приемлемо.

Оставь свой отзыв

Kosten 2017-12-23 06:24 1 , ответ пользователю Kosten

На этой странице объясняется и демонстрируется как использовать hover псевдо-класс CSS для достижения визуальных эффектов, когда пользователь наводит курсор на элемент. Этот метод представляет собой быстрый, и простой способ обеспечить эффект без использования JavaScript.

Каскадные таблицы стилей (CSS) предоставляют псевдоклассы, которые позволяют вам изменять стиль HTML элементов при взаимодействии с пользователем. Они часто используются с CSS text-decorationи colorсвойствами для изменения цвета текста или удаления, также добавления подчеркивания под текстом.

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

В этом примере всякий раз, когда пользователь наводится на любую ссылку внутри divэ лемента с классом cool-effects подчеркивания, цвет будет меняться, а шрифт станет полужирным. Вы можете добавить любое соответствующее свойство CSS к эффекту наведения, однако помните об удобстве использования зависание над эффектами может быть довольно раздражающим, если злоупотреблять.

Стеклянная/прозрачная кнопка с помощью CSS3

Возможности CSS3 открывают огромный ряд новых возможностей перед веб-дизайнерами. Сегодня я хотел бы поделиться с вами один из примеров, где используются несколько интересных свойств для создания прозрачной (стеклянной) кнопки с различными тенями. Результат выглядит примерно так:

стеклянная кнопка на css3

Создадим div-контейнер с ссылкой в html-файле, которая и станет нашей кнопкой. Для этого присвоим ей какой-нибудь CSS-класс, например, button:

Теперь перейдем к оформленияю класса button в CSS. Самое интересное и главное свойство для создания всех теней на кнопке, это – box-shadow. Лучше всего, попробуйте сами поэкспериментировать с параметрами этого свойства, изменяя цвета и значения. Условные добавки “-moz” (Firefox) и “-webkit” (Chrome) в двух других классах, служат для точного указания движков разных браузеров.

border-radius — служит для указания радиуса закругления углов на кнопке.

И наконец opacity, свойство которое позволит установить значение для прозрачности всего блока (кнопки). Я добавил его к селектору :hover, т.е. при наведении курсора кнопка будет становиться тусклее.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *