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

Как сделать красивую кнопку css

  • автор:

Как создать эффект аккуратной скользящей кнопки

Зайдя на сайт Netlify, я заметил красивые кнопки для загрузки. Они маленькие. При этом заметные и интерактивные! Они растягиваются, если навести курсор. Но в браузере Safari эти кнопки выглядят странно.

Я воссоздал их в качестве демо-версии, убрав некоторые недостатки.

При реализации такой кнопки я использовал:

  • Свойство left для перемещения надписи «Скачать».
  • Свойство padding при наведении курсора мыши на кнопку, чтобы создать дополнительное пространство для отображения надписи «Скачать».
  • Свойство scale() со значением 1,1, чтобы при взаимодействии все содержимое оставалось внутри кнопки.
  • transition для отступов, background-position для значка кнопки и свойство transform , чтобы обеспечить плавную анимацию между состоянием кнопки по умолчанию и при наведении курсора мыши.

Ниже показано как это выглядит без стилей.

Ниже продемонстрировано, как метка «Скачать» скрыта за пределами кнопки с помощью overflow: hidden . И где она отображается при наведении курсора мыши.

С помощью отрицательных значений свойства left мы скрываем иконку и надпись «Скачать». А когда курсор мыши наводится на кнопку, задаем свойству положительные значения.

/* Состояние по умолчанию */ .button < background: #f6bc00 url(data:image/svg+xml;base64. ) no-repeat -12px center; overflow: hidden; >.button span:nth-child(1) < position: absolute; left: -70px; >/* Состояние при наведении */ .button:hover < padding-left: 95px; background-position: 5px center; >.button span:nth-child(1)

Если оставить код без изменений, значок кнопки будет виден и создаст достаточно места для надписи «Скачать». Но при наведении курсора она будет съезжать с кнопки.

Это можно исправить, применив к кнопке transform: scale(1, 1).

/* Состояние при наведении */ .button:hover

Значения свойства padding – магические числа. Они могут изменять в зависимости от используемого шрифта, его размера и других факторов.

Последний ключевой компонент – свойство transition , которое заставляет все плавно скользить.

/* Состояние по умолчанию */ .button < background: #f6bc00 url(data:image/svg+xml;base64. ) no-repeat -12px center; overflow: hidden; transition: padding .2s ease, background-position .2s ease, transform .5s ease; >

Добавьте несколько деталей, таких как закругленные углы, и кнопка станет идеальной.

Ангелина Писанюк автор-переводчик статьи « Recreating Netlify’s Neat-o Sliding Button Effect »

Красивые кнопки для сайта. Часть 3

Очередная коллекция красивых эффектов для кнопок на сайте, созданных с помощью анимации теней, псевдоэлементов и иконок.

Пример 1. Кнопка с анимированной тенью и стрелкой

 
.shadow-btn < position: relative; padding: 15px 40px; margin: 0 20px; background: #fff9ef; font-family: 'Montserrat Alternates', sans-serif; color: #fe7660; text-transform: lowercase; border: 2px solid #052464; font-size: 16px; font-weight: 600; outline: none; cursor: pointer; >.btn-inner < display: flex; align-items: center; >.text < line-height: 1; transform: translateX(0px); transition: .3s cubic-bezier(.86, 0, .07, 1); >.btn-inner i < margin-left: 5px; font-size: 14px; transition: transform .3s cubic-bezier(.86, 0, .07, 1), opacity .3s; >.shadow < position: absolute; top: 9px; left: 9px; width: 100%; height: 100%; background: #98dfd7; z-index: -1; transition: .3s ease; transform: translate3d(0, 0, 0); >.shadow-btn:hover .text < transform: translateX(8px); >.shadow-btn:hover i < transform: translateX(100%); opacity: 0; >.shadow-btn:hover .shadow

Пример 2. Кнопки с анимированной тенью при наведении

   
.btn < padding: 15px 30px; margin: 0 20px; color: #f83b3b; font-family: 'Montserrat Alternates', sans-serif; border: 3px solid; background: white; outline: none; cursor: pointer; >.text < position: relative; display: inline; vertical-align: middle; font-size: 23px; font-weight: 600; z-index: 5; >.btn1 .text:after < content: ""; position: absolute; bottom: 0; height: 15px; background: #f29f97; left: -5px; width: calc(100% + 10px); z-index: -1; transform: scaleX(1); transform-origin: 0 0; transition: .3s cubic-bezier(.075, .82, .165, 1); >.btn1:hover .text:after < transform: scaleX(0); >.btn2 .text:after < content: ""; position: absolute; bottom: auto; top: 0; left: 0; height: 0%; width: 100%; background: #f29f97; z-index: -1; transition: .3s ease; >.btn2:hover .text:after < height: 100%; bottom: 0; top: auto; >.btn3 .text:after < content: ""; position: absolute; bottom: 0; height: 15px; background: #f29f97; left: 0; width: 100%; z-index: -1; transform: scaleY(1); transform-origin: left bottom; transition: .3s cubic-bezier(.075, .82, .165, 1); >.btn3:hover .text:after

Пример 3. Split-кнопка

 
.btn < position: relative; padding: 15px 30px; margin: 0 20px; font-family: 'Montserrat Alternates', sans-serif; color: white; font-weight: 600; background: #c81965; border-width: 0; outline: none; cursor: pointer; >.btn:before, .btn:after < content: ""; position: absolute; height: 50%; width: 100%; background: #c81965; transition: .3s cubic-bezier(.75, .24, .01, .9); >.btn:before < top: 0; right: -5px; >.btn:after < bottom: 0; left: -5px; >.btn:hover:before < transform: translateX(-5px); >.btn:hover:after < transform: translateX(5px); >.btn2, .btn2:before, .btn2:after < background: #1f0b2f; >.text

Пример 4. Кнопка с эффектом волны при наведении

.btn < position: relative; overflow: hidden; z-index: 1; padding: 10px 40px; margin: 0 20px; font-family: 'Montserrat Alternates', sans-serif; font-weight: 600; line-height: 30px; color: white; font-size: 15px; text-transform: uppercase; background: #f5b08f; border-width: 0; box-shadow: 5px 5px 0 #532831; outline: none; cursor: pointer; transition: 1.5s; >.btn:before, .btn:after < content: ""; position: absolute; height: 200px; left: -50%; margin-top: -100px; top: 50%; width: 200px; border-radius: 50%; opacity: 0.3; z-index: -1; transform: scale(0); >.btn:before < background: #ffeede; transition: .8s ease-out; >.btn:after < transition: .4s ease-in .3s; >.btn:hover < color: #532831; >.btn:hover:before, .btn:hover:after

Пример 5. Slide-эффект при наведении на кнопку

  
.btn < margin: 0 20px; padding: 15px 34px; overflow: hidden; font-family: 'Montserrat Alternates', sans-serif; color: white; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; border-width: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); outline: none; cursor: pointer; >.btn1 < background: linear-gradient(90deg, #c600b2, #7619fd); >.btn2 < background: linear-gradient(90deg, #a3ffb0, #2bd9e8); >.btn3 < background: linear-gradient(90deg, #49c2ff, #6a27d2); >.btn:before, .btn:after < content: ""; position: absolute; z-index: -1; width: 100%; height: 100%; left: -110%; top: 0; opacity: 0.1; background: black; transform: skewX(25deg); transition: .5s ease; >.btn:hover:before < left: -10%; transition: .3s ease; >.btn:hover:after

Пример 6. Кнопка с тенью и иконкой

.btn < position: relative; height: 40px; line-height: 40px; padding: 0 30px 0 40px; margin: 0 20px; background: linear-gradient(-135deg, #00E5FE, #4463FE); box-shadow: 0 15px 65px #4753FF; border-width: 0; border-radius: 50px; font-family: 'Montserrat Alternates', sans-serif; font-size: 14px; color: white; outline: none; cursor: pointer; >.btn:before < content: "\f067"; position: absolute; left: 5px; top: 5px; font-family: FontAwesome; color: white; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: transparent; transition: .3s ease-in-out; >.btn:hover:before

Публикации по этой теме:

Красивые кнопки для сайта. Часть 4

Красивые кнопки для сайта. Часть 2

Красивые кнопки для сайта

2.7. CSS-ссылки

Поделиться:
  • HTML
    • 1.1. Основы HTML
    • 1.2. HTML-элементы
    • 1.3. HTML-атрибуты
    • 1.4. HTML-текст
    • 1.5. HTML-ссылки
    • 1.6. HTML-изображения
    • 1.7. HTML-таблицы
    • 1.8. HTML-списки
    • 1.9. Спецсимволы HTML
    • 1.10. HTML-генераторы
    • 1.11. Семантические элементы HTML5
    • 1.11.1. Элемент документа
    • 1.11.2. Метаданные документа
    • 1.11.3. Разделы документа
    • 1.11.4. Группировка содержимого
    • 1.11.5. Семантика уровня текста
    • 1.11.6. Правки документа
    • 1.11.7. Встраиваемое содержимое
    • 1.11.8. Ссылки
    • 1.11.9. Табличные данные
    • 1.11.10 Формы
    • 1.11.11. Интерактивные элементы
    • 1.11.12. Скрипты
    • 1.12. HTML5-аудио
    • 1.13. HTML5-видео
    • 1.14. Необязательные теги HTML5-разметки
    • 1.15. HTML5-формы
    • 1.16. Контентная модель HTML5
    • 2.1. Основы CSS
    • 2.2. CSS блочная модель
    • 2.3. Блочные и строчные элементы
    • 2.4. CSS-позиционирование
    • 2.5. CSS-текст
    • 2.6. CSS-шрифты
    • 2.7. CSS-ссылки
    • 2.8. CSS-таблицы
    • 2.9. CSS-списки
    • 2.10. CSS-фон
    • 2.11. CSS-рамка
    • 2.12. CSS content
    • 2.13. CSS-цвета
    • 2.14. CSS-генераторы
    • 2.15. CSS3 UI
    • 2.16. CSS-градиент
    • 2.17. CSS3-рамка
    • 2.18. CSS3-оформление текста
    • 2.19. CSS-тень блока
    • 2.20. CSS-переходы
    • 2.21. CSS-трансформации
    • 2.22. CSS-анимация
    • 2.23. CSS flexbox
    • 2.24. CSS колонки
    • 2.25. CSS 3D-трансформации
    • 2.26. CSS-медиазапросы
    • 2.27. CSS-фильтры
    • 2.28. CSS Grid
    • 2.29. CSS3-шрифты
    • 2.30. CSS3-переполнение
    • 2.31. CSS3-способы письма
    • 2.32. Объединение и смешивание слоев
    • 2.33. CSS-фрагментация
    • 3.1. Основы JavaScript
    • 3.2. Выражения в JavaScript
    • 3.3. Циклы JavaScript
    • 3.4. DOM — объектная модель документа
    • 3.10. Введение в jQuery
    • 3.11. Методы jQuery
    • 3.11.1. Манипуляции HTML-элементами
    • 3.11.2. Чтение и изменение CSS-свойств, классов и атрибутов
    • 3.11.3. Обход DOM и выборка HTML-элементов
    • 3.11.4. jQuery анимация
    • 3.11.5. Методы объекта window
    • 3.12. События jQuery
    • 3.13. Селекторы jQuery
    • 4.1. Пять принципов выбора и использования шрифтов
    • 4.2. Выбираем шрифт для сайта
    • 4.3. Правила веб-типографики
    Последние записи

    2014-2024 © Елена Назарова,

    Коммерческое использование материалов сайта HTML5BOOK.RU запрещено. В остальных случаях обязательно наличие индексируемой ссылки со словом «Источник» на сайт или на страницу, содержащую этот материал.

    Генератор кнопки css

    Чтобы получить готовый css код кнопки нажми на нее и скопируй.

    Скопировать код кнопок css

    Все параметры кнопки

    Размер кнопки
    Размер шрифта
    Закруглить края кнопки
    Верхний цвет градиента кнопки
    Нижний цвет градиента кнопки
    Полоса сверху кнопки
    Цвет кнопки при наведении
    Цвет текста
    Цвет текста после наведения
    Цвет кнопки при нажатии

    Выбери шрифт у кнопки

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

    Чтобы сделать красивую кнопку css воспользуемся генератором. У кнопки есть параметры.

    • Размер кнопки css. Изменяем форму кнопки высоту и ширину кнопки.
    • Размер текста у кнопки. Задается свойством font-size.
    • Закругление краев. Если нужна круглая кнопка используем свойство border-radius: 50%.

    Зададим все цвета кнопки css.

    1. Верхний цвет градиента. Установим цвет в позиции top.
    2. Нижний цвет градиента. Задаем в позиции bottom.
    3. Полоса сверху кнопки. Дополнительная функция украшения.
    4. Цвет при наведении. Используем класс hover.
    5. Цвет текста. Подбираем цвет контрастный цвету кнопки.
    6. Цвет текста кнопки после наведения. Если изменим фон со светлого на темный, то и цвет должен стать другим.
    7. Цвет кнопки при нажатии. Установим третий цвет для класса active.

    После установки всех параметров наживаем на скопировать код кнопки css и переносим в проект. В файле индекса зададим html код для кнопки с классом button. Теперь можно с генерировать тень box shadow и добавить ее при наведении на кнопку, получится красивый эффект.

    Как сделать кнопку html

    оформление кнопок css

    Чтобы сделать красивую html кнопку воспользуемся псевдоклассами.

    1. &:active момент нажатия на кнопку добавляем свойство изменение цвета.
    2. &:hover навели курсор мышки на кнопку и она изменила цвет текста и фона.
    • Чтобы сделать кнопку по центру используем свойство margin: 0 auto. Подробно о позиционирование элементов написано тут.
    • Можно сделать красивую кнопку с анимацией, читать тут.
    • Как сделать каркас для кнопки в html можно прочитать тут.

    Примеры красивых кнопок css

    Рассмотрим стили css у 12 разных видов кнопок.

    Прозрачная кнопка css

    Оформить Прозрачная кнопка

    button.button11 color:#fff; line-height: 32px; border: 0px; text-align: center; width: 100px; border-radius:16px; background:transparent; background-image: -webkit-linear-gradient(#127009, #3b9932, #409e37); background-image: -moz-linear-gradient(#127009, #3b9932, #409e37); background-image: -o-linear-gradient(#127009, #3b9932, #409e37); -moz-box-shadow: inset 0 0 7px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 0 7px rgba(0,0,0,0.5); -o-box-shadow: inset 0 0 7px rgba(0,0,0,0.5); box-shadow: inset 0 0 7px rgba(0,0,0,0.5); display: block; text-decoration: none; font-size: 14px; padding: 0px; > button.button1:before

    Ку Вторая прозрачная кнопка

    button.button2 < color:#fff; line-height: 48px; border: 0px; text-align: center; width: 48px; border-radius:24px; background:transparent; background-image:-moz-radial-gradient(center bottom, circle cover, rgba(16, 236, 236, 1) 20%, rgba(0, 44, 228, 1) 80%); background-image:-webkit-radial-gradient(center bottom, circle cover, rgba(16, 236, 236, 1) 20%, rgba(0, 44, 228, 1) 80%); background-image:-o-radial-gradient(center bottom, circle cover, rgba(16, 236, 236, 1) 20%, rgba(0, 44, 228, 1) 80%); display: block; padding: 0px; text-decoration: none; >button.button2:before < content: "."; color:transparent; line-height: 24px; width: 40px; margin-left: 4px; margin-bottom: -24px; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) ); background-image:-moz-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); border-radius:24px; display:block; >>

    Заказать Кнопка с деформацией

    button.button3 < border-radius: 10px; border: none; padding: 10px 10px 14px 10px; color: #111; border-radius: 10px; font-size: 1.2em; font-weight: 200; transition: all 0.2s; margin: 5px; border-bottom: 0px solid #eee; cursor:pointer; >button.button3:active < transform: scaleX(0.9) translateY(4px); >button.button3.green < background: #82CA9D; >button:not(:active)

    Заказать Стиль кнопки с изменением положения

    button.button4 < text-decoration: none; outline: none; display: inline-block; width: 140px; height: 45px; line-height: 45px; border-radius: 45px; margin: 10px 20px; font-size: 11px; text-transform: uppercase; text-align: center; letter-spacing: 3px; font-weight: 600; color: #524f4e; background: white; box-shadow: 0 8px 15px rgba(0,0,0,.1); transition: .3s; >button.button4:hover

    Заказать Стиль с бликом

    button.button5 < text-decoration: none; outline: none; display: inline-block; padding: 12px 40px; margin: 10px 20px; border-radius: 30px; background-image: linear-gradient(45deg, #6ab1d7 0%, #33d9de 50%, #002878 100%); background-position: 100% 0; background-size: 200% 200%; font-size: 24px; font-weight: 300; color: white; box-shadow: 0 16px 32px 0 rgba(0,40,120,.35); transition: .5s; >button.button5:hover

    Заказать Кнопка с цветовой полосой

    button.button6 < text-decoration: none; outline: none; display: inline-block; margin: 10px; color: white; box-shadow: 0 0 0 2px white; padding: 20px 0; width: 150px; text-align: center; text-transform: uppercase; letter-spacing: 3px; position: relative; overflow: hidden; >span < position: relative; z-index: 5; >button.button6:before, button.button6:after < content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; >button.button6:before < transform: translateX(-100%); background: white; transition: transform .3s cubic-bezier(.55,.055,.675,.19); >button.button6:after < background: #413ad5; transform: translateX(100%); transition: transform .3s cubic-bezier(.16,.73,.58,.62) .3s; >button.button6:hover:before, button.button6:hover:after

    Заказать Кнопка с объемным цветом

    button.button7 < text-decoration: none; outline: none; display: inline-block; padding: 15px 30px; margin: 10px 20px; border-radius: 10px; box-shadow: 0 0 40px 40px #F137A6 inset, 0 0 0 0 #F137A6; font-weight: bold; letter-spacing: 2px; color: white; transition: .15s ease-in-out; >button.button7:hover

    Заказать Кнопка с бликом

    button.button8 < text-decoration: none; outline: none; display: inline-block; padding: 10px 30px; margin: 10px 20px; position: relative; overflow: hidden; border: 2px solid #fe6637; border-radius: 8px; color: #fe6637; transition: .2s ease-in-out; >button.button8:before < content: ""; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.5)); height: 50px; width: 50px; position: absolute; top: -8px; left: -75px; transform: skewX(-45deg); >button.button8:hover < background: #fe6637; color: #fff; >button.button8:hover:before

    Стеклянная кнопка

    Заказать Стиль стеклянной кнопки

    button.button9 < position: relative; display: inline-block; color: #777674; font-weight: bold; text-decoration: none; text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px; user-select: none; padding: 1em 2em; outline: none; border-radius: 3px / 100%; background-image: linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%), linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)), linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)), linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)), linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)), linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)); background-repeat: no-repeat; background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px; background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px); box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px; >button.button9:hover < transition: .5s linear; background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px); >button.button9:active

    3d кнопка css

    Заказать Стиль 3d кнопки

    button.button10 < position: relative; display: inline-block; font-weight: bold; color: #000; text-decoration: none; text-shadow: -2px 2px rgba(255,255,255,.3); line-height: 1.1; padding: .5em 3em .5em .6em; background: linear-gradient(#ecc92b, #fce25b); box-shadow: 0 0 0 1px #fce25b inset, -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5px 5px rgb(188,163,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px 7px rgb(213,188,28), -8px 8px rgb(185,160,0), -7px 9px 1px rgba(0,0,0,.4), -5px 11px 1px rgba(0,0,0,.2), -1px 13px 4px rgba(0,0,0,.2), 4px 16px 7px rgba(0,0,0,.3); transition: .4s; >button.button10:active < box-shadow: none; -webkit-transform: translate(-7px, 8px); transform: translate(-7px, 8px); >button.button10:after < content: ""; position: absolute; top: calc(50% - .6em/2); right: .6em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border: .37em solid; border-top: none; border-left: none; width: .6em; height: .6em; box-shadow: inset -2px 2px rgba(255,255,255,.3); >button.button10:active

    Выпадающая кнопка css

    Цена 5 р. Код для выпадающей кнопки css

    button.button11 < color: #FFFFFF; text-decoration: none; >button.button11 < background:#80a9da; background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1)); background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:linear-gradient(top, #80a9da 0%, #6f97c5 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 ); padding-left:20px; padding-right:80px; height:38px; display:block; margin: 20px auto; text-align:center; width:200px; position:relative; border:1px solid #5d81ab; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; overflow:hidden; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; >.a-btn-3-text < padding-top:5px; display:block; width:0px; font-size:18px; white-space:nowrap; text-shadow:0px 1px 1px rgba(255,255,255,0.3); color:#446388; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; >.a-btn-3-slide-text < position:absolute; height:100%; top:0px; right:52px; width:0px; background:#63707e; text-shadow:0px -1px 1px #363f49; color:#fff; font-size:18px; white-space:nowrap; text-transform:uppercase; text-align:left; text-indent:10px; overflow:hidden; line-height:38px; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -webkit-transition:width 0.3s linear; -moz-transition:width 0.3s linear; -o-transition:width 0.3s linear; transition:width 0.3s linear; >.a-btn-3-icon-right < position:absolute; right:0px; top:0px; height:100%; width:52px; border-left:1px solid #5d81ab; -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; >.a-btn-3-icon-right span < width:38px; height:38px; opacity:0.7; position:absolute; left:50%; top:50%; margin:-20px 0px 0px -20px; background:transparent url(images/arrow_right.png) no-repeat 50% 55%; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; >.button11:hover < padding-right:140px; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); >.button11:hover .a-btn-3-text < text-shadow:0px 1px 1px #5d81ab; color:#fff; >.button11:hover .a-btn-3-slide-text < width:57px; >.button11:hover .a-btn-3-icon-right span < opacity:1; >.button11:active

    Пульсирующая кнопка css

    Заказать Стиль в css для пульсирующей кнопки

    button.button12 < position: relative; display:block; color: #ED5B00; text-decoration: none; margin: 20px auto; text-decoration:none; text-align:center; width:125px; font-family: verdana; font-size: 22px; letter-spacing: 2px; border-bottom: 2px solid transparent; >button.button12:hover,button.button12:focus < outline: none; border-bottom: 2px solid #eee; >button.button12:before, button.button12:after < position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; border: 12px double rgba(0,0,0,0.1); border-radius: 50%; content: ''; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); -moz-transform: translateX(-50%) translateY(-50%) scale(0.2); transform: translateX(-50%) translateY(-50%) scale(0.2); >button.button12:after < width: 60px; height: 60px; border-width: 6px; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); transform: translateX(-50%) translateY(-50%) scale(0.8); >button.button12:hover:before, button.button12:hover:after < -webkit-animation: pulsate 1.2s infinite; -moz-animation: pulsate 1.2s infinite; -ms-animation: pulsate 1.2s infinite; animation: pulsate 1.2s infinite; >@-webkit-keyframes pulsate < 30%< opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); >100% < opacity: 0.3; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5); >> @-moz-keyframes pulsate < 30%< opacity: 1; -moz-transform: translateX(-50%) translateY(-50%) scale(1); >100% < opacity: 0.3; -moz-transform: translateX(-50%) translateY(-50%) scale(0.5); >> @-ms-keyframes pulsate < 30%< opacity: 1; -ms-transform: translateX(-50%) translateY(-50%) scale(1); >100% < opacity: 0.3; -ms-transform: translateX(-50%) translateY(-50%) scale(0.5); >> @-keyframes pulsate < 30%< opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); >100% < opacity: 0.3; transform: translateX(-50%) translateY(-50%) scale(0.5); >>

    Простая неоновая кнопка с помощью CSS

    Приветствую всех читателей в данном блоге. Сегодня мы поговорим о том, как же сверстать такую красивую неоновую кнопку. Казалось бы, что такая штука довольно трудоёмка, однако не тут то было. Используя несколько трюков CSS 3 мы сможем быстро, буквально в 20 строчек создать кнопку. Итак, для начала сделаем разметку нашей кнопки:

    И собственно говоря это всё что нам нужно. Далее мы будем творить всю магию на CSS.

    Давайте определимся с цветом. Я решил выбрать классический розовый оттенок, но можно использовать совершенно любой. Для меня это будет цвет #ff14bd.

    Добавляем размер текста к кнопке. Можно использовать пиксели, но я предпочитаю относительные величины, такие как rem:

    .neon {
    color: #ff14bd;
    border: .4rem solid #ff14bd;
    border-radius: 1rem;
    background: transparent;
    font-size: 3rem;
    padding: .8rem;
    font-family: ‘Futura PT’;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 0 0.5em 0 #ff14bd, 0 0 0.5em 0 #ff14bd;
    }

    Здесь мы добавили края, сделали углы закруглёнными, убрали фон кнопки, задали размер шрифта, внутренние отступы, семейство шрифта, относительное позиционирование элементов внутри блока, курсор и внутреннюю тень, которая будет имитировать свечение.

    Далее используем псевдокласс :before

    .neon:before {
    content: »;
    position: absolute;
    background: #ff14bd;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    transform: perspective(1em) rotateX(40deg) scale(1, 0.3);
    filter: blur(1em);bottom: -2em;opacity: 0.7;
    }

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

    При клике на кнопку свечение должно усиливаться, поэтому прозрачность будет убрана:

    .neon:hover:before {
    opacity: 1;
    }

    А сам неон при большой концентрации энергии загорится белым и будет освещать всё вокруг своим изначальным светом:

    .neon:hover {
    background: #ff14bd;
    color: #fff;
    box-shadow: 0 0 2em 0.5em #ff14bd;
    }

    Осталось только задать фону небольшие настройки по цвету и расположению кнопки, но это только ради презентации. Я думаю у моих читателей надуться идеи и получше:

    body {
    background: #31202b;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:center;
    height:100vh;
    font-size: 14px;
    }

    Вот и всё, красивая кнопка готова. Можно экспериментировать также со свечением, добавить свойство text-shadow и увеличить отражение свечения и придать больший реализм.

    В Студии Али Велиева вы можете заказать красивые дизайнерские решения. Будьте уверены, что мы реализуем всё профессионально без дополнительной графики, которая будет создавать нагрузку на браузер клиента.

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

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