HTML/CSS кнопка, 3 состояния?

Question

[Сергей Гулин]

Всем привет! В общем ребят, суть вот в чем, есть 3 изображения кнопки, в разных состояниях (некатив/наведение/нажатие) и нужно как то эту кнопку добавит на сайт, поиски в гугле дали только готовые подобные кнопки на CSS. Заранее благодарен за ответ.
Пример кнопки:

Я только начинаю заниматься версткой, так что не кидайтесь тапками будьте добры :) Всем мир

Comments

[Алексей Уколов]

Вопрос ваш конкретно в чем? Какие пути решения вы уже попробовали?

Answer 1

[Mikhail Osher]

Загуглите "css sprite button".

Answer 2

[Ilya Korablev]

К :hover, :active добавляйте фоновые изображения.

Button{
}
Button:hover{
}
Button:active{
}

Ставьте ко всем кнопкам одно фоновое изображение, но меняйте его через CSS sprite

Answer 3

[Сергей Гулин]

Всем спасибо за ответы, вот такой код вышел :)

button{
   background:url(css-sprite.png) 0 -55px;
   height:50px;
   width:150px;
   cursor:pointer;
   }
 
button:hover{
   background-position: 0 0;
   }
 
button:active{
   background-position: 0 -109px;
   }

Comments

[Сергей ZSA]

спрайтом конечно круто, а почему бы не реализовать на чистом css? У кнопки есть градиент и тень. Там нет ничего сложного совершенно. Для градиента - поиск в гоше «генератор градиента», ребята из мозиллы сделали его прекрасным.

[Serj-One]

Кнопка простейшая. Зачем спрайт, когда можно сделать на css?

[Ilya Korablev]

Отметьте наши вопросы решением, пожалуйста.

Answer 4

[Dmitry Katyushin]

Я не советую делать кнопки с изображениями (особенно как в Вашем примере, когда можно обойтись чистым css) - максимум с иконками

Comments

[Сергей Гулин]

Я устраиваюсь в офис, программистом стажером, и мне дали макет, в котором такие кнопки... По этому и решил из них сделать

[Роман]

Сергей Гулин: если будете так делать, то вас быстро выгонят. Разумеется если это не политика конторы - "верстать кнопки изображениями". Так уже никто не делает несколько лет. Все что можно делать на ЦСС - делается на ЦСС.

[Сергей Гулин]

Роман: Ну я не знаю что за политика конторы, но в PSDшке есть в слоях валяеться "3 вида кнопок" и их состояние, возможно тогда стоит сделать и спрайтом и в ЦСС? там 2 таких кнопки на странице, в таком случае, я думаю будет не хуже

[Роман]

Сергей Гулин: за 3 вида кнопок вы еще поблагодарите дизайнера. Это хороший знак, так как не все так делают. Состояния предоставлены вам, чтобы вы не придумывали "а как эта кнопка будет выглядеть при ховере".
Запомните золотое правило "Все что может быть сверстано на чистом ХТМЛ и ЦСС, так и должно верстаться". Т.е. если кнопка не имеет каких либо диких форм, градиентов и ли чего-то еще, что реализуется через ЦСС топорно/криво или вообще не возможно, то такая кнопка делается всегда на ЦСС.
Ответьте себе на вопрос, что вы будете делать завтра, если шеф скажет "А давай надпись в кнопке заменим на "Купить дешевле" ? Вы же не будете сами в ФШ менять надпись для кнопки, растягивать ее?

[Сергей Гулин]

Роман: Спасибо за советы