• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать прозрачную кнопку на HTML + CSS (Применение прозрачных кнопок в дизайн web сайтов и блогов)
Как сделать прозрачную кнопку на HTML + CSS
Kosten
Пятница, 08 Ноября 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Не секрет, что призрачные кнопки отлично вписывается в различные фоновые картинки. В этой статье поговорим о размещении прозрачных кнопок поверх фоновых изображений. Ведь плоском веб-дизайне кнопки-призраки обычно размещаются поверх больших фоновых изображений или видеороликов. Так что подробно узнаете, как сделать так, чтобы изображение охватывало весь фон, а затем поместил над ним призрачную кнопку.

Фоновое изображение обложки

Чтобы создать область изображения и покрыть весь фон сайта, нам нужно поместить его в свойство background тега body, как показано во фрагменте CSS ниже. Обратите внимание на использование «центра неподвижного центра без повтора» вместе с фоновым изображением, которое требует, чтобы изображение было центрировано по горизонтали и вертикали, не повторялось и фиксировалось в своем положении при прокрутке



CSS

Код
body {
background: url(http://zornet.ru/_fr/56/s3046428.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

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

HTML

Код
<a href="http://zornet.ru/" class="kuckgro-unamag" target="_blank">ZorNet.Ru — сайт для вебмастера</a>
<a href="http://zornet.ru/load/udivitelnyj_adaptivnyj_css_slajder/146-1-0-9959" class="kuckgro-unamag" target="_blank">ZorNet.Ru — сайт для вебмастера №2</a>

CSS

Код
body {
  background: url(http://zornet.ru/_fr/56/s4193617.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;
}

.kuckgro-unamag {
    color: #fff;
    border: 2px solid #fafafa;
    border-radius: 4px;
    font-size: 17px;
    padding: 7px 12px;
    font-weight: normal;
    margin: 6px 0;
    margin-right: 12px;
    display: inline-block;
    text-decoration: none;
    min-width: 120px;
    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 linear;
}

.kuckgro-unamag:hover, .kuckgro-unamag:active {
  color:#fff;
  background-color:rgba(0, 150, 136, 0.4);
}

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

Демонстрация
Прикрепления: 0397764.png (35.9 Kb) · ghost-buttons-o.zip (3.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать прозрачную кнопку на HTML + CSS (Применение прозрачных кнопок в дизайн web сайтов и блогов)
  • Страница 1 из 1
  • 1
Поиск: