ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простые прозрачные кнопки Ghost на CSS

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

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

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

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

HTML

Код

<a href="http://zornet.ru/" class="raminu_gulam" target="_blank">Сайт ZORNET.RU</a>

CSS

Код

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

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

Демонстрация:

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

HTML

Код

<a class="serbymikas" href="#" style="color:#317cbf; text-decoration:none">ZorNet: Создание сайта на uCoz</a>

CSS

Код

.serbymikas {transition:all 0.2s ease-in-out !important;}
.serbymikas:hover {
color: #bf3192 !important;
font-size:17px !important;
}

Демонстрация

23 Декабря 2017 Просмотров: 2163 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

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

Комментарии: 1
Порядок вывода комментариев: Kosten 23 Декабря 2017 06:24¹ 0 На этой странице объясняется и демонстрируется как использовать hover псевдо-класс CSS для достижения визуальных эффектов, когда пользователь наводит курсор на элемент. Этот метод представляет собой быстрый, и простой способ обеспечить эффект без использования JavaScript. Каскадные таблицы стилей (CSS) предоставляют псевдоклассы, которые позволяют вам изменять стиль HTML элементов при взаимодействии с пользователем. Они часто используются с CSS text-decorationи colorсвойствами для изменения цвета текста или удаления, также добавления подчеркивания под текстом. Хотя более продвинутые функции могут предоставляться с использованием JavaScript, где стили могут быть изменены при наведении только с помощью псевдо классов CSS, перечисленных на этой странице. В этом примере всякий раз, когда пользователь наводится на любую ссылку внутри divэ лемента с классом cool-effects подчеркивания, цвет будет меняться, а шрифт станет полужирным. Вы можете добавить любое соответствующее свойство CSS к эффекту наведения, однако помните об удобстве использования зависание над эффектами может быть довольно раздражающим, если злоупотреблять. HTML Код <div class="arumikan"> <p><a href="http://zornet.ru/">HTML ZPRNET.RU</a></p> CSS Код .arumikan a:hover {text-decoration:none;color:orange;font-weight:bold;} Демонстрация: