Картинка в
На сайте находятся справочники и учебные курсы по различным веб-технологиям, а также руководства по вёрстке веб-страниц.
Связи
Разделы сайта
Популярное
- Уроки по HTML и CSS
- Руководство по флексбоксам
- HTML5 и CSS3 на примерах
- Руководство по JSON
- Как верстать на HTML5 и CSS3
- Продвинутые уроки по HTML и CSS
- Визуальное руководство по свойствам flexbox
- Создание первого приложения на Node
Помощь по сайту
Сайт WebReference.ru использует VPS от компании Beget.
CSS для начинающих. CSS кнопки это просто // HTML and CSS
Для начала нам необходимо нарисовать кнопку, вроде этой:
Для этого лучше всего нам подойдет инструмент “Rounded Rectangle Tool” в Photoshop, с него и начнем – нарисуем нечто вроде:
Изменяя параметр Radius вы сможете задать желаемое загругление кнопок ( в примере для наглядности контент полностью прозрачный (“Fill Opacity” => 0%)):
Ширина объекта в данном примере 320px – т.е. я предполагаю, что кнопок большего размера не будет.
Границу выводим с помощью “Stroke” (из “Blending Options”), тип – градиент – от #000000 до #676767:
Теперь не мешало бы и залить кнопочку градиентом (сверху указан параметр opacity, внизу цвет; инструмент “Gradient Overlay” из “Blending Options”):
Результат с залитой границей:
Если мы сделаем цветной фон:
Ну вот – кнопочка и готова, приступим к следующему шагу…
Простая CSS кнопка
Самый простой вариант – у нас все кнопки одного размера и одного/двух цветов, соответственно готовим небольшой “спрайт” на все случаи жизни (простым копированием слоя с кнопкой):
Теперь нам остается лишь слегка подправить CSS для таких кнопок:
.button < cursor:pointer; display:block; height:70px; width:320px; line-height:70px; text-align:center; background-image:url('images/buttons.png'); background-repeat:no-repeat; >.button.green < background-position:0 0 >/* зеленая кнопка */ .button.green:hover < background-position:0 -350px >/* активная зеленая кнопка */ /* и т.д. */
Сам HTML код элементарен:
<a href="#" title="Label" green">Label</a> <a href="#" title="Label" white">Label</a> <a href="#" title="Label" black">Label</a> <a href="#" title="Label" orange">Label</a> <a href="#" title="Label" red">Label</a>
Резиновая CSS кнопка
Теперь усложним задачу – мы не имеем представления какого цвета будут кнопки, и какого размера, мы лишь предполагаем, что кнопки не будут больше 320px в ширину.
Строим DOM
Ну и сам HTML код:
<ul <li href="#" title="Label">Label<em></em></a></li> <li green"><a href="#" title="Label">Label<em></em></a></li> <li white"><a href="#" title="Label">Label<em></em></a></li> <li black"><a href="#" title="Label">Label<em></em></a></li> <li orange"><a href="#" title="Label">Label<em></em></a></li> <li red"><a href="#" title="Label">Label<em></em></a></li> </ul>
Примечание: можно использовать практически любые другие HTML теги, это дело вкуса, так что таким же образом вы можете изменить и элементы формы. Для упрощения HTML’а можно воспользоваться JavaScript’ом. Приведу пример:
<script type="text/javascript"> $(document).ready(function()< $('form :button, form :submit').each(function()< var className = $(this).attr('class'); $(this).wrap('<div '+className+'"></div>'); $(this).after('<em></em>'); >); >); </script> <form onsubmit="return false;"> <input type="button" title="Button" value="Button"/> <input type="submit" title="Submit" value="Submit"/> </form>
Пишем CSS
Читаем комментарии по коду:
.button < /* у нас кнопка с закруглением - значит нам необходимо у DOM элемента так же скруглить углы */ border-radius:10px; -moz-border-radius:10px; -khtml-border-radius:10px; -webkit-border-radius: 10px; /* внутренний элемент <a> должен быть смещен относительно <li> на 20px - освобождаем место для <em> */ padding-right:20px; /* данные элемент будет relative - т.е. все элементы внутри него с абсолютным позиционированием будут плясать от него */ position:relative; >.button a, .button em < /* ссылке и элементу em задаем одинаковое фоновое изображение */ background-image:url('css/images/button.png'); background-repeat:no-repeat; >.button a < /* ссылку делаем блочным элементом задаем высоту элемента, а так же свойство line-height - с его помощью мы выравниваем текст по вертикали */ display:block; height:52px; line-height:52px; outline:none; color:#333; font-size:18px; text-indent:20px; text-decoration:none; text-align:center; text-shadow: #333 0px -1px 0px; >.button em < /* внутренний элемент так же будет блочным с размером 52х20, с абсолютной позиционированием */ display:block; position:absolute; background-position:100% 0; width:20px; height:52px; top:0px; right:0px; >/* цвет шрифта для некоторых кнопок лучше поменять */ .button.green a, .button.black a, .button.red a < color:#fff; >/* тут указываем цвет наших кнопок */ .button.green < background-color:#009e0f >.button.green:hover < background-color:#068612 >.button.white < background-color:#f0f0f0 >.button.white:hover < background-color:#c0c0c0 >.button.black < background-color:#000 >.button.black:hover < background-color:#333 >.button.orange < background-color:#ff7800 >.button.orange:hover < background-color:#c60 >.button.red < background-color:#f00 >.button.red:hover
Наблюдаем результат
Сравним результат наших трудов в разных браузерах:
Как вы можете заметить, есть несколько проблем с данной реализацией:
- полупрозрачность в IE6 не работает – можем докрутит хаки, но зачем – IE6 можно считать умершим
- box-radius в IE и Opera не работает – либо отказываемся от данной фичи, либо зарисовываем свободное пространство фоновым цветом (для IE так же есть грязный хак, см.: Curved corner (border-radius) cross browser)
Кнопочки можно пощупать на демо, все сорцы доступны по следующей ссылке:
Еще ссылки по теме:
- Scalable CSS Buttons Using PNG and Background
- Bold CSS Buttons
- Make fancy buttons using CSS sliding doors technique
- CSS Sliding Door using only 1 image
- CSS Oval buttons
Информация
- jQuery для начинающих
- jQuery для всех
- PHP для всех
Проекты
- Charts Builder
- Photo Blog
- Syntax Highlighter
Блогролл
- NIX Solutions Ltd.
- Мысли с самого низа
- Прохождение игр
Как сделать картинку кнопкой css
Добрый день. нужна кнопка с анимацией, внутри кнопки изображение, при наведении на кнопку картинка внутри приближается и немного вертится по оси. пример тут: http://demo.rockettheme.com/joomla-templates/anacron/ (знаю что это не кнопка а слайдер многофункциональный, но мне нужно сделать кнопку с ссылкой. а там ссылки не вставить)
Скриншот блока также прикрепил
Изображения
| 2017-10-08_14-40-27.jpg (56.3 Кб, 152 просмотров) |
юзер как все
Участник клуба
Регистрация: 10.01.2012
Сообщений: 1,586
transform: rotate(25deg)
и
scale.
| pompiduskus |
| Посмотреть профиль |
| Найти ещё сообщения от pompiduskus |
Регистрация: 08.10.2017
Сообщений: 2
да, но не знаю как сделать границы для картинки. чтобы при увеличении grow (как я понял) картинка урезалась
юзер как все
Участник клуба
Регистрация: 10.01.2012
Сообщений: 1,586
Page-Title #content < width: 100%; box-sizing: border-box; text-align: center; padding: 50px; >.link-block-wrapper < display: inline-block; width: 320px; height: 240px; box-shadow: 0 0 2px #555; margin: 10px; overflow: hidden; >.link-block-image < width: 100%; height: 100%; display: block; background-size: 320px 240px !important; >.link-block-wrapper:hover > .link-block-image | pompiduskus |
| Посмотреть профиль |
| Найти ещё сообщения от pompiduskus |
| Похожие темы | ||||
| Тема | Автор | Раздел | Ответов | Последнее сообщение |
| Как сделать так, что бы текст был рядом с картинкой | Ilg@m | HTML и CSS | 1 | 19.02.2017 13:11 |
| как сделать текст рядом с картинкой? | twenty eight | Помощь студентам | 1 | 20.01.2016 19:51 |
| Как в дельфи закинуть анимированную картинку? | Argontarg | Общие вопросы Delphi | 6 | 27.01.2014 11:58 |
| Как сделать таблицу НАД картинкой, а не под ней. | Proger16 | HTML и CSS | 5 | 28.04.2013 19:55 |
| Как сделать таблицу НАД картинкой, а не под ней. | Proger16 | HTML и CSS | 2 | 14.04.2013 14:54 |
Резиновая кнопка
Для формы сделать резиновую (тянущуюся) кнопку по ширине с особым оформлением (с обычным оформлением уверен у тебя проблем не возникает).
- ширина кнопки зависит от текста в ней
- использование тега (чтобы сохранить логичность кода. Как сделать с , пока не нашел решения)
- кликабильность всей поверхности кнопки
- отсутствие javascript (еще одна причина использовать )
- ну и конечно же кроссбраузерность и следование стандартам
На кой это нужно?
На сайте может быть много форм, а на крупных сайтах — очень много. Каждая форма как правило имеет кнопку. И бывает так, что в разных формах текст в кнопке должен быть разным: ok, сохранить, задать вопрос менеджеру и т.п. Чтобы не плодить для каждой формы отдельный фон для кнопки, лучше сделать одну универсальную кнопку. Это не только съекономит трафик за счет сокращения картинок, но и сделает верстку более гибкой (не нужно будет каждой новой кнопке с отличающимся текстом рисовать новый фон и добавлять классы).
Решение
Воспользуемся следующим приемом:
текст кнопки
.button < color: #fff; /* цвет текста кнопки */ height: 23px; /* высота кнопки */ padding: 5px 6px 0 6px; /* внутренние отступы кнопки */ background: url(path-to/button.png) no-repeat; /* длинная картинка - левая часть фона кнопки */ font-size: 11px; /* размер шрифта кнопки */ float: left; /* чтобы ширина блока зависела от содержимого */ position: relative; overflow: hidden; >.button span < background: url(path-to/button-r.png); /* фон правой части кнопки */ height: 27px; width: 6px; display: block; position: absolute; z-index: 1; /* обязательно указываем z-слой, чтобы input был выше */ top: 0; right: 0; overflow: hidden; >.button input < position: absolute; /* абсолютно размещаем input поверх остальных элементов */ top: 0; left: 0; width: 200%; /* input должен занимать всю область по высоте и ширине, чтобы вся кнопка была кликабильной (200% для ие6, чотбынавреняка растянулся на всю ширину, ибо при 100% растягивался не полностью) */ height: 100%; opacity: 0; /* делаем кнопку полностью прозрачной, чтобы она не искажала задуманный дизайн, но была функционирующей */ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* прозрачность для ие6-7 */ cursor: pointer; border: none; z-index: 2; /* z-слой должен быть больше, чем у других частей кнопки */ >* html .button < height: 27px; /* учитываем блочную модель ие6 */ >.button span < right: -1px; /* тут правильней было б использовать expression для лечения смещений в 1px в ие6 */ >
Заметки
- В боевых условиях вместо хаков для IE6 следует использовать условные комментарии
- для уменьшения количества отдельных картинок, можно воспользоваться техникой спрайтов — склеить картинки в одну:
Недостаток
В таком виде не подходит прием, если углы кнопки должны быть прозрачными.
Решение 2
update by nadiam84 Некоторые манипуляции в HTML + CSS дают возможность сделать кнопку с прозрачными углами, за счет того, что углы не будут накладываться на фон:
.button < float: left; /* чтобы ширина кнопки зависела от контента. по идее должен подойти и display: inline-block */ margin: 50px; >.button div < position: relative; color: #fff; height: 27px; background: url(path-to/button.png) no-repeat; /* левые углы фона с прозрачными участками */ font-size: 11px; >* html .button div < /* хак для ие6 чтобы с шириной кнопки проблем не было */ width: 10px; >.button span < /* правое скругление кнопки выносим за пределы кнопки */ background: url(path-to/button-r.png); height: 27px; width: 6px; display: block; position: absolute; z-index: 1; top: 0; right: -6px; overflow: hidden; >.button input < height: 100%; cursor: pointer; margin: 0 -6px 0 0; /* чтобы кликабильным была правая часть кнопки, вынесенная за ее пределы */ padding: 2px 6px 5px 6px; overflow: visible; /* убираем необнуляемые внутренние отступы для ie6-7 */ border: none; position: relative; z-index: 2; background: none; >
- IE 6-7
- Firefox 3.6
- Opera 10.5
- Chrome 7
- возможность использования прозрачных углов;
- код чуть более семантичен, чем в предыдущем примере (текст кнопки, теперь действительно текст кнопки).
- для реализации одной кнопки требуется 4 элемента! Можно span заменить псевдоэлементом (before), но это не намного улучшит ситуацию;
- раздутый CSS код.
Решение 3 — CSS3
update by Евгений Рыжков Пришло время CSS3 и незачем больше заниматься фигней с этими костылями из кучи HTML и CSS! Юзаем border-radius в сочетании с каким-нибудь PIE для IE и будет всем счастье.
input < height: 27px; cursor: pointer; padding: 2px 6px 5px 6px; overflow: visible; border: none; background: url(img/button-repeat.png) repeat-x; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; >
input < behavior: url(path-to/PIE.htc); >
- IE 6-8
- Firefox 3.6
- Opera 10.5
- Chrome 7
Преимущества тут даже не стоит перечислять: достаточно сравнить HTML и CSS коды этого варианта с предыдущими. Да пребудет с нами HTML5 и CSS3!
Используемые приемы в этой статье:
- CSS прозрачность
- смещение на 1px в IE6
- Отступы в кнопках в IE6-7
- CSS приемы
- «Дергание» сайта
- background position со смещением
- clearfix
- CSS прозрачность
- CSS хаки
- RGBA — CSS полупрозрачность
- Затемнение фона
- Кроссбраузерный
- Обнуление отступов
- Порядок описания ссылок
- Прелоад изображений
- Сброс стилей
- Сокращения в CSS
- Убираем рамку с эл-ов в фокусе
- Условные CSS
- Условные комментарии
- Поворот вокруг своей оси
- Поворот объекта вокруг свой
- Resize для textarea в Safari и Chrome
- Блочная верстка форм
- Кастомные checkbox и radio на CSS
- Кросбраузерные input и textarea
- Кроссбраузерный button
- Нестандартные checkbox
- Нестандартные radio
- Нестандартные select
- Нестандартные select multiple
- Нестандартные поля выбора файла
- Нестандартные текстовые поля
- О кроссбраузерности placeholder
- Отступы у checkbox и radio
- Оформление input type=search
- Резиновая кнопка
- Текст в поле type=»password»
- Блоки равной высоты в строке
- Колонки равной высоты
- Прижимаем подвал к низу
- Ресайз окна: потомок перерос родителя
- Сайт в центре экрана
- Фиксированная колонка + резиновая + clear:both
- CSS 3D лента
- CSS3 всплывающие подсказки
- IMG внутри блока — убираем странный отступ
- IMG: меняем рисунок при наведении
- Аккордеон на чистом CSS3
- Валидный target=»_blank»
- Верстка рейтингов
- Верстка содержания
- Вставка спецсимволов в генерируемый контент
- Вставка стрелок
- Индивидуальные стили для li. Избавляемся от классов.
- Масштабируемая картинка в резиновой колонке
- Многоколоночный текст на CSS3
- Нестандартное подчеркивание
- Отменяем обтекание текстом картинки
- Оформление внешних ссылок
- Оформление изображений по align
- Оформляем «ol»
- Правильные анонсы новостей
- Список определений. Требуем невозможного.
- Firefox
- -moz-box-shadow и -moz-border-radius — это кошмар CPU
- Позиционирование внутри button
- Ширина input type=file
- Onload в IE9
- z-index в IE6-7
- Баг с текстом при применении Alpha фильтра
- Масштабирование и PIE
- Отступы в кнопках в IE6-7
- Проблемы с em
- Эмуляция after и before для IE 6-7
- Эмуляция data:URL для IE6-7 — используем MHTML-включение
- hasLayout
- Max-width
- Min-height
- Min-width
- Min-width и max-width одновременно
- PNG и прозрачность
- Высота блока 1px
- Дублирование символов
- Дырка под футером
- Как перекрыть select
- Обрезка контента c отрицательным margin в IE6
- Отступы плавающих блоков
- Проблемы с размерами блоков
- Псевдокласс :first-child
- Псевдокласс hover в IE 6
- Селектор потомков >
- Селекторы атрибутов [type=…]
- Сестринский селектор
- Смещение на 1px
- Ссылки с вложением
- Устраняем flickering
- Эмуляция position:fixed
- overflow-y
- Не подгружаются шрифты @font-face
- Проблема с oveflow: hidden
- Скругление img
- HTML шаблон для мобильных устройств
- Выпадающее меню на CSS
- Выравнивание навигации из блоков по центру
- Выравнивание навигации по середине
- Резиновое меню
- Резиновое меню из блоков
- Убираем класс для первого элемента
- Box-sizing: переключаем блочную модель
- inline-block: простое свойство для непростых задач
- Вертикальная позиция для строчного элемента
- Вертикальное выравнивание
- Выравнивание по центру с position: absolute
- Вычисляемые отступы
- Два в одном: позиция + размеры
- Долой отступы между строчными элементами (и блоками)
- Обходим схлопывание margin
- Центрирование картинки в блоке
- Центрирование резинового блока по горизонтали
- Активация flash
- Вставка flash в HTML
- Вставляем ролик с YouTube
- Как отключить flash
- Как перекрыть flash
- Параметры для вставки объектов
- Ссылка на flash объекте
- CSS треугольники
- Аппаратное ускорение анимации
- Встраиваем изображения — data:URL
- Градиент: CSS3 против CSS2 + картинка
- Лесенка спрайтов — сложный случай поклейки
- На одну картинку меньше. Спецсимвол ×
- Необычные тени с CSS3 box-shadow
- Оптимизация Google Web Fonts
- Оптимизация фонов с помощью Canvas
- Проблемы с border-radius
- Псевдоэлемент before для маркера списка
- Скругление углов. Обзор методов.
- Сокращаем HTML5 код
- Спрайты: меньше картинок — больше скорость
- Тень для блока
- Фигуры с углами на CSS
- Шаблоны градиентов
- Дополнение Skype
- Подключить favicon
- Профилактика сайта: максимально простое оповещение
- Ссылки на skype
- @font-face в деталях
- Cufon — нестандартный шрифт средствами JS
- font-size: 100.01% для html
- Безопасные шрифтовые CSS стеки для англоязычных текстов
- Безопасные шрифтовые CSS стеки для рунета
- Безопасные шрифты
- Вертикальный текст
- Используем псевдоэлемент :first-letter
- Контур для текста
- Нестандарный шрифт. Быть ему или нет?
- Нестандартный шрифт средствами CSS
- Плавающий :first-letter
- Подмена текста изображением
- Соответствия шрифтов Windows, Mac и Unix/Linux
- Строчный :first-letter
- Текст под углом
- Текст с CSS градиентом
- Тень для текста
- Эффект отражения