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

Призрачные кнопки на фоновом изображении CSS

Это будет отличным решение по прозрачным кнопкам с эффектом, которые размещаются по вверх разных фоновых изображений или видеоматериалов. Здесь для начало создадим фон, он может быть разный, но преминем с градиентами и на его поставим кнопки, где они видны будут, так как на светлом фоне вы из визуально не увидите, но ходя кликом можно найти. Для создания интервала изображения и покрытия всего фона сайта нам нужно поместить его в свойство background тега body, как показано во фрагменте CSS ниже.

Обратите внимание на использование «централизованного центра без повтора» вместе с фоновым изображением, которое требует, чтобы изображение было горизонтально и вертикально центрировано, а не повторялось и фиксировалось в его положении после прокрутки. Также обратите внимание на использование «background-size: cover» которое просит браузер масштабировать изображение как можно больше, чтобы охватить весь видовой экран.

Мы будем использовать ту же кнопку-призрак CSS которую мы создали в предыдущей статье с некоторыми изменениями, как указано ниже:

1. Поскольку мы помещаем кнопку призрака поверх фонового изображения, мы сделаем цвет состояния по умолчанию белым (#fff)

2. Мы добавляем закругленные края для кнопки, задавая граничный радиус, чтобы сделать края более мягкими.

3. Кроме того, мы также добавим переход мягкого цвета при наведении, о котором мы говорили в предыдущем сообщении.

4. При наведении кнопки призрака заполняется полупрозрачным цветным фоном.

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

HTML

Код

<a href="http://zornet.ru/load/81" class="garnizog_arunim" target="_blank">Скрипты для uCoz</a>

CSS

Здесь в стилях уже прикрепленный фон.

Код

body {
  background: url(http://zornet.ru/Aben/ABGDA/zornet_ru/blurred1.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
}

h1 {
  font-weight: 300;
  text-transform: uppercase;
}

.garnizog_arunim {
  color: #f7f7f7;
  border: 2px solid #f5eeee;
  border-radius: 4px;
  font-size: 18px;
  padding: 8px 15px;
  font-weight: normal;
  margin: 7px 0;
  margin-right: 17px;
  display: inline-block;
  text-decoration: none;
  min-width: 119px;
  font-weight: 400px;
  display: inline-block;
  -webkit-transition: background-color .5s linear;
  -moz-transition: background-color .5s linear;
  -ms-transition: background-color .5s linear;
  -o-transition: background-color .5s linear;
  transition: background-color .5s cubic-bezier(0, 0, 0.83, 0.97);
}

.garnizog_arunim:hover, .garnizog_arunim:active {
  color:#eae8e8;
  background-color:rgba(11, 93, 85, 0.4);
}

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

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

21 Декабря 2017 Просмотров: 1489 Комментариев: (0)

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

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

Kosten

Комментарии: 0