Как сделать прозрачную кнопку в html
Перейти к содержимому

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

  • автор:

Стеклянная/прозрачная кнопка с помощью 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; > 


Как сделать прозрачную кнопку в 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);
>








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


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 gnomKOST. .


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


    

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



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


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


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




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


Отслеживать


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


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


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


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


2 мар 2017 в 13:54


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





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

  1. Gsm aux и main что это
    2. 

  2. Ipsec vpn mtu 1400 что это
    3. 

  3. Object object что за ошибка
    4. 

  4. Как удалить слово из словаря в ворде
    5.

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

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