Как сверстать такую прозрачную кнопку?
Как сверстать такую кнопку? Кнопка прозрачная, сзади градиент. Если бы был простой фон, можно бы было через псевдоэлемент. Если вырезать с градиентом и спозиционировать, то при адаптиве будут не стыковки. http://prnt.sc/ef3ik4
Отслеживать
110k 23 23 золотых знака 114 114 серебряных знаков 377 377 бронзовых знаков
задан 2 мар 2017 в 13:43
11 2 2 бронзовых знака
Эту кнопку можно посмотреть где-то онлайн и не картинкой?
2 мар 2017 в 13:54
Решение такое: делаем рамку и скругление, но вот только рамку с левой стороны убираем, фон прозрачный. Вырезаем закругления верх/низ и задаем их псевдоэлементами. Обарачиваем кнопку в еще один блок, и этому блоку через псевдоэлемент задаем иконку телефона
Как сделать кнопку прозрачной css
Фоновое изображение обложки
Чтобы создать область изображения и покрыть весь фон сайта, нам нужно поместить его в свойство 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);
>
В наши дни вы найдете много сайтов, использующих кнопки в таком стиле на больших фоновых изображениях на их целевых страницах.
Как сделать кнопку «показать всё» с прозрачным фоном?
Привет. На прикрепленном изображении есть кнопка «показать всё», под ней виднеется контент. Как реализовать данную идею?
И ещё один вопрос, как сделать черту на кнопкой?
по краям она сужаетя и светлеет (типа градиента что-то)
- Вопрос задан более трёх лет назад
- 3876 просмотров
Стеклянная/прозрачная кнопка с помощью CSS3
Возможности CSS3 открывают огромный ряд новых возможностей перед веб-дизайнерами. Сегодня я хотел бы поделиться с вами один из примеров, где используются несколько интересных свойств для создания прозрачной (стеклянной) кнопки с различными тенями. Результат выглядит примерно так:
Создадим div-контейнер с ссылкой в html-файле, которая и станет нашей кнопкой. Для этого присвоим ей какой-нибудь CSS-класс, например, button:
1 2 3id="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 36a.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; >