MnogoBlog
Как создать сайт на wordpress, настроить и оптимизировать wordpress
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 комментарий
- ВолодИюнь 8, 2017 в 17:16 Вот простая прозрачная кнопка без лишнего кода.
color: #00e0d0; /*цвет текста*/
background: rgba(0, 0, 0, 0); /* прозрачность фона*/
border-radius: 3px; /*закругление рамки*/
border-color: #00e0d0; /*цвет рамки*/
Добавить комментарий Отменить ответ
Для отправки комментария вам необходимо авторизоваться.