Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 24.12.2013, 11:48   #1
Любовь_
Пользователь
 
Регистрация: 21.01.2013
Сообщений: 15
По умолчанию css для кнопки

Всем привет!
Возникла такая задача: есть картинка кнопки (500px в длину в оригинале), есть необходимость сделать стиль кнопки css, при котором она бы выглядела бы как на картинке, но с учетом содержимого (по длине). проблема в том, что в этом случае картинка или обрезается справа, или сильно сжимается и тогда не видно эффектов на краях кнопки. Вопрос: как сделать такой стиль не используя элементы типа div, span и прочие кликабельными, а именно для button ?

Спасибо.
Любовь_ вне форума Ответить с цитированием
Старый 24.12.2013, 13:15   #2
Лубышев
Участник клуба
 
Аватар для Лубышев
 
Регистрация: 23.07.2007
Сообщений: 1,054
По умолчанию

Картинку в студию!
Писано по д'Эльфийски
Лубышев вне форума Ответить с цитированием
Старый 24.12.2013, 13:26   #3
eval
Подтвердите свой е-майл
 
Регистрация: 29.08.2012
Сообщений: 4,022
По умолчанию

С картинкой любой дурак сможет, а вы вот без картинки попробуйте!
Вот это будет высший пилотаж
eval вне форума Ответить с цитированием
Старый 24.12.2013, 13:44   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Код:
button {
    position: relative;
    background: url(path/to/pic/yourpic.png) 50% 0;
    border: 0 none;
    outline: 1px solid #f00;
    padding: 5px 20px 6px;
}
button:before,
button:after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    width: 10px;
    outline: 1px solid #ff0;
    background: inherit;
}
button:before {
    left: 0;
    background-position: 0 0;
}
button:after {
    right: 0;
    background-position: 100% 0;
}
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 24.12.2013, 16:53   #5
Любовь_
Пользователь
 
Регистрация: 21.01.2013
Сообщений: 15
По умолчанию

Спасибо!) вопрос решился)
Любовь_ вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как в CSS-коде задать отдельное изображение для каждого из 3 состояний кнопки меню моего сайта? Michael_Ardan HTML и CSS 1 21.03.2013 14:16
Код Обзора Файлов для C++ для Кнопки ProGec4 Общие вопросы C/C++ 2 11.03.2012 17:49
вставка css кнопки Марк Охман HTML и CSS 6 26.01.2011 00:16
CSS для mod_virtuemart bowa HTML и CSS 0 20.09.2009 21:33