Шаблоны CSS3 для кнопок
Использование различных шаблон существенно облегчает повседневную работу веб разработчика. Почему бы не сделать прелестные заготовки с помощью CSS3 для кнопок?
Особенности шаблонов CSS3 для кнопок
Кнопки
Кнопка создается просто:
<a href="/" class="button">Кнопка</a>
или
<button class="button">Кнопка</button>
Конечно, можно использовать <input type="submit">
, но для лучшего кросс-браузерного решения следует применять две выше приведенные конструкции.
CSS
.button{ display: inline-block; *display: inline; zoom: 1; padding: 6px 20px; margin: 0; cursor: pointer; border: 1px solid #bbb; overflow: visible; font: bold 13px arial, helvetica, sans-serif; text-decoration: none; white-space: nowrap; color: #555; background-color: #ddd; background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)), url(data:image/png;base64,iVBORw0KGg[...]QmCC); transition: background-color .2s ease-out; background-clip: padding-box; /* Fix bleeding */ border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset; text-shadow: 0 1px 0 rgba(255,255,255, .9); } .button:hover{ background-color: #eee; color: #555; } .button:active{ background: #e9e9e9; position: relative; top: 1px; text-shadow: none; box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset; }
Кнопки другого размера
Есть опции для изменения размера кнопок:
<button class="small button">Кнопка</button>
или
<button class="large button">Кнопка</button>
CSS
/* Стили маленьких кнопок */ .button.small{ padding: 4px 12px; } /* Стили больших кнопок */ .button.large{ padding: 12px 30px; text-transform: uppercase; } .button.large:active{ top: 2px; }
Разный цвет кнопок
Вам могут понадобиться кнопки разного цвета:
<button class="button">Кнопка</button> <button class="color red button">Кнопка</button> <button class="color green button">Кнопка</button> <button class="color blue button">Кнопка</button>
CSS
.button.color{ color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2); background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)), url(data:image/png;base64,iVBORw0KGg[...]QmCC); } /* */ .button.green{ background-color: #57a957; border-color: #57a957; } .button.green:hover{ background-color: #62c462; } .button.green:active{ background: #57a957; } /* */ .button.red{ background-color: #c43c35; border-color: #c43c35; } .button.red:hover{ background-color: #ee5f5b; } .button.red:active{ background: #c43c35; } /* */ .button.blue{ background-color: #269CE9; border-color: #269CE9; } .button.blue:hover{ background-color: #70B9E8; } .button.blue:active{ background: #269CE9; }
Отключенные кнопки
Для ситуаций, когда кнопку надо отключить, делаем соответствующие стили:
<button class="button" disabled>Кнопка</button> <button class="color red button" disabled>Кнопка</button> <button class="color green button" disabled>Кнопка</button> <button class="color blue button" disabled>Кнопка</button>
CSS
.button[disabled], .button[disabled]:hover, .button[disabled]:active{ border-color: #eaeaea; background: #fafafa; cursor: default; position: static; color: #999; /* Следует избегать использования директивы !important, но в данном случае она необходима :) */ box-shadow: none !important; text-shadow: none !important; } .green[disabled], .green[disabled]:hover, .green[disabled]:active{ border-color: #57A957; background: #57A957; color: #D2FFD2; } .red[disabled], .red[disabled]:hover, .red[disabled]:active{ border-color: #C43C35; background: #C43C35; color: #FFD3D3; } .blue[disabled], .blue[disabled]:hover, .blue[disabled]:active{ border-color: #269CE9; background: #269CE9; color: #93D5FF; }
Группировка кнопок
Для группировки кнопок сделаем соответствующие стили:
<ul class="button-group"> <li><button class="button">Кнопка</button></li> <li><button class="button">Кнопка</button></li> <li><button class="button">Кнопка</button></li> <li><button class="button">Кнопка</button></li> </ul>
CSS
/* Группировка кнопок */ .button-group, .button-group li{ display: inline-block; *display: inline; zoom: 1; } .button-group{ font-size: 0; /* Зазаор для встроенного элемента */ margin: 0; padding: 0; background: rgba(0, 0, 0, .04); border-bottom: 1px solid rgba(0, 0, 0, .07); padding: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; } .button-group li{ margin-right: -1px; /* Перекрытие каждой правой рамки */ } .button-group .button{ font-size: 13px; /* Устанавливаем размер шрифта */ -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .button-group .button:active{ -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; } .button-group li:first-child .button{ -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .button-group li:first-child .button:active{ -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; } .button-group li:last-child .button{ -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } .button-group li:last-child .button:active{ -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset; box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset; }
Совместимость с браузерами
Шаблоны отлично работают во всех основных браузерах. Но CSS3 свойства не действуют в IE8 и старше.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/MBURa37bl5s/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Там, где речь заходит об очень больших деньгах, разумно не доверять никому. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.