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

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

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

Отслеживать

109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака

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

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

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

2 мар 2017 в 13:54

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

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


CSS прозрачная кнопка (кнопка призрак)
MnogoBlog > WordPress > Дизайн > CSS и теги > CSS прозрачная кнопка (кнопка призрак)
Как сделать прозрачную кнопку на сайте с помощью CSS – кнопка призрак. Вот некоторые варианты: 
Скачать исходники для статьи можно ниже 
Бизнес сообщество BizNet - здесь 
Как будут выглядеть создаваемые нами прозрачные кнопки можно посмотреть здесь – топ прозрачных кнопок на 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 комментарий

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

Добавить комментарий Отменить ответ
Для отправки комментария вам необходимо авторизоваться.
Призрачные кнопки с определением направления наведения в CSS
От автора: меня бы удивило, если бы вы никогда не сталкивались с призрачными кнопками. Вы знаете их: у них прозрачный фон, который при наведении заливается сплошным цветом. В данной статье мы создадим призрачную кнопку в CSS, но это будет просто. Забавная и хитрая часть — это анимировать заливку этой призрачной кнопки так, чтобы фон заливался цветом в направлении, в котором на нее наводится курсор.
Вот с чего мы начинаем:
В большинстве случаев для заливки сплошным цветом background-color используется transition. Существуют макеты, в которых кнопка может заполняться слева направо, сверху вниз и т. д., для некоторого визуального изящества. Например, вот слева направо:
Тут есть моменты UX, к которым можно придираться. Например, если вы наводите курсор против направления заливки. Рассмотрим этот пример. Кнопка заливается слева, а вы наводите курсор справа.
Лучше, если кнопка заливается с начальной точки наведения.
Итак, как мы можем реализовать для кнопки определение направления наведения? Вашей первой мыслью может быть использовать решение на JavaScript, но вместо этого мы можем создать что-то с помощью CSS и небольшой дополнительной разметки.
Вот несколько чистых CSS кнопок-призраков с определением направления!
Давайте рассмотрим это шаг за шагом. Весь код доступен в этой коллекции CodePen.
Создание основы
Давайте начнем с создания основы призрачной кнопки. Разметка проста.
Читать:
Как копировать файлы между rd client android