Перейти к содержимому

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

  • автор:

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

Как сверстать такую кнопку? Кнопка прозрачная, сзади градиент. Если бы был простой фон, можно бы было через псевдоэлемент. Если вырезать с градиентом и спозиционировать, то при адаптиве будут не стыковки. http://prnt.sc/ef3ik4

Отслеживать

110k 23 23 золотых знака 113 113 серебряных знаков 377 377 бронзовых знаков

задан 2 мар 2017 в 13:43

11 2 2 бронзовых знака

Эту кнопку можно посмотреть где-то онлайн и не картинкой?

2 мар 2017 в 13:54

Решение такое: делаем рамку и скругление, но вот только рамку с левой стороны убираем, фон прозрачный. Вырезаем закругления верх/низ и задаем их псевдоэлементами. Обарачиваем кнопку в еще один блок, и этому блоку через псевдоэлемент задаем иконку телефона

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

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

Чтобы создать область изображения и покрыть весь фон сайта, нам нужно поместить его в свойство background тега body, как показано во фрагменте 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;
>

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

ZorNet.Ru — сайт для вебмастера
ZorNet.Ru — сайт для вебмастера №2

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);
>

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

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

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

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

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

1 2 3


 id="container">  href="#" class="button">Click Me  


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


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


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


Вот и весь код стиля с нашей кнопкой:


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36


a.button  font-family: Helvetica, arial, serif; color:#fff; text-align:center; font-size:30px; cursor: pointer; text-decoration: none; padding:10px; border: 1px solid rgba(0,0,0,0.5); border-bottom: 3px solid rgba(0,0,0,0.5); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */ inset 0 1px rgba(255,255,255,0.3), /* Top light Line */ inset 0 10px rgba(255,255,255,0.2), /* Top Light Shadow */ inset 0 10px 20px rgba(255,255,255,0.25), /* Sides Light Shadow */ inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */ -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); > a.button:hover  opacity: 0.7; filter: alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; > 


MnogoBlog


Как создать сайт на wordpress, настроить и оптимизировать wordpress


MnogoBlog


прозрачные кнопки css


CSS прозрачная кнопка (кнопка призрак)


MnogoBlog > WordPress > Дизайн > CSS и теги > CSS прозрачная кнопка (кнопка призрак)


Как сделать прозрачную кнопку на сайте с помощью CSS – кнопка призрак. Вот некоторые варианты: 
Скачать исходники для статьи можно ниже 


Как будут выглядеть создаваемые нами прозрачные кнопки можно посмотреть здесь – топ прозрачных кнопок на CSS. 


1. Простая кнопка-призрак 


Вот код самой кнопки, к которой мы применим CSS стили для превращения её в кнопку-призрак.


А вот CSS стили, для сайтов на wordpress – они хранятся в файле стилей – style.css – админка wordpress, пункт “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов откроется файл style.css.


.ghost-button < display: inline-block; width: 200px; padding: 8px; color: #fff; border: 1px solid #fff; text-align: center; outline: none; text-decoration: none; >.ghost-button:hover, .ghost-button:active


2. Кнопка-призрак с закругленными краями 


CSS стили кнопки:


.ghost-button-rounded-corners < display: inline-block; width: 200px; padding: 8px; color: #fff; border: 1px solid #fff; border-radius: 5px; text-align: center; outline: none; text-decoration: none; >.ghost-button-rounded-corners:hover, .ghost-button-rounded-corners:active


3. С простым эффектом перехода 


CSS стили кнопки:


.ghost-button-transition < display: inline-block; width: 200px; padding: 8px; color: #fff; border: 2px solid #fff; text-align: center; outline: none; text-decoration: none; transition: background-color 0.2s ease-out, color 0.2s ease-out; >.ghost-button-transition:hover, .ghost-button-transition:active


4. С толстой рамкой 


CSS стили кнопки:


.ghost-button-thick-border < display: inline-block; width: 200px; font-weight: bold; padding: 8px; color: #fff; border: 3px solid #fff; text-align: center; outline: none; text-decoration: none; transition: background-color 0.2s ease-out, color 0.2s ease-out; >.ghost-button-thick-border:hover, .ghost-button-thick-border:active


5. Полупрозрачное затемнение 


CSS стили кнопки:


.ghost-button-semi-transparent < display: inline-block; width: 200px; padding: 8px; color: #fff; border: 2px solid #fff; text-align: center; outline: none; text-decoration: none; transition: background-color 0.2s ease-out, border-color 0.2s ease-out; >.ghost-button-semi-transparent:hover, .ghost-button-semi-transparent:active < background-color: #fff; /* fallback */ background-color: rgba(255, 255, 255, 0.4); border-color: #fff; /* fallback */ border-color: rgba(255, 255, 255, 0.4); transition: background-color 0.3s ease-in, border-color 0.3s ease-in; >


6. С изменением цвета рамки 


CSS стили кнопки:


.ghost-button-border-color < display: inline-block; width: 200px; padding: 8px; color: #fff; border: 2px solid #fff; text-align: center; outline: none; text-decoration: none; transition: border-color 0.3s ease-out, color 0.3s ease-out; >.ghost-button-border-color:hover, .ghost-button-border-color:active


7. С заливкой кнопки цветом 


CSS стили кнопки:


.ghost-button-full-color < display: inline-block; width: 200px; padding: 8px; color: #fff; background-color: transparent; border: 2px solid #fff; text-align: center; outline: none; text-decoration: none; transition: color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out; >.ghost-button-full-color:hover, .ghost-button-full-color:active


8. С изменением размера кнопки 


CSS стили кнопки:


.ghost-button-size-transition < display: inline-block; width: 200px; height: 25px; line-height: 25px; margin: 0 auto; padding: 8px; color: #fff; border: 2px solid #fff; text-align: center; outline: none; text-decoration: none; transition: width 0.3s ease-out, height 0.3s ease-out, line-height 0.3s ease-out; >.ghost-button-size-transition:hover, .ghost-button-size-transition:active


Похожие записи:


Запись обновлена Апрель 22, 2016 и опубликована в рубрике CSS и теги by Константин .


CSS прозрачная кнопка (кнопка призрак) : 1 комментарий


    

  1. ВолодИюнь 8, 2017 в 17:16 Вот простая прозрачная кнопка без лишнего кода. 
    color: #00e0d0; /*цвет текста*/ 
    background: rgba(0, 0, 0, 0); /* прозрачность фона*/ 
    border-radius: 3px; /*закругление рамки*/ 
    border-color: #00e0d0; /*цвет рамки*/
    2. 



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


Для отправки комментария вам необходимо авторизоваться.





Похожие публикации:
    

  1. Java classloader как работает
    2. 

  2. Speccy installer что это за программа
    3. 

  3. Как пользоваться git bash
    4. 

  4. Как удалить таблицу в sqlite
    5.

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

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