Перейти к содержимому


Партнерская программа Kredov

Кнопка на css из изображений

#1 N1TAXE

N1TAXE
  • Пользователь
  • 4 сообщений
  • Репутация: 0
0

Отправлено 29 Ноябрь 2013 - 19:01

Всем привет. Как сделать кнопку из изображений на css, с анимацией наведения миши?

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Масштабирование изображений в CSS
  2. Flash ролик - как фоновое изображение для кнопки в форме поиска
  3. Как вписать изображение в размер окна браузера при помощи html/css
  4. Делаем симпатичные кнопки на CSS3
  5. Кнопка на css из двух картинок

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 30 Ноябрь 2013 - 16:15

Например, так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tst</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.button{
padding: 2em;
}
.button a{
  font: bold 12px Verdana, Geneva, "DejaVu Sans", sans-serif;
  display: block;
  width: 301px;
  height: 36px;
  line-height: 36px;
  text-decoration: none;
  background: #ccc url(button.gif) no-repeat;
  color: #000;
  text-align: center;
}
.button a:hover{
  width: 301px;
  height: 36px;
  background: #c60 url(button.gif) 0 -36px no-repeat;
  color: #fff;
}
</style>
</head>
<body>
<div class="button"><a href="#">Кнопка</a></div>
</body>
</html>
Использовалась составная (с видом кнопки в обычном состоянии и под курсором мышки) картинка button.gif для кнопки 301х72px.
Методом спрайтов смещаем фон кнопки при наведении мыши на 36px по вертикали и получаем анимированную кнопку.

Прикрепленные изображения

  • button.gif

  • 0

#3 N1TAXE

N1TAXE
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 02 Декабрь 2013 - 21:06

Хмм... С вашим изображением получается, а вот если я пытаюсь вставить свое, .png, то не получаеться... В чем проблема?
  • 0

#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 02 Декабрь 2013 - 22:00

Вот как вам ответить, если вы не показываете ни своей картинки ни того, как вы ее вставляете? )

Короче, вашу картинку — в студию. Тогда, наверное, найдем и проблему и решение.
  • 0

#5 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 03 Декабрь 2013 - 14:57

кнопки с использованием изображение уже прошлый век, ну почти прошлый :)

я сейчас перехожу на использование градиентов для кнопок. получается неплохо.

html код

<a class="build_stole_btn" href="#">This is my gradient button</a>

css код

a.build_stole_btn {font-size: 30px; font-family: 'Arial', sans-serif; color: #fff;text-decoration: none; display: block; width: 390px; height: 80px; line-height: 80px;
				   border-bottom: #484949 solid 1px; border-radius: 5px;margin: 30px auto 30px auto;}
a.build_stole_btn {
    background: -webkit-linear-gradient(#106f96, #2186b1);
    background: -moz-linear-gradient(#106f96, #2186b1);
    background: -o-linear-gradient(#106f96, #2186b1);
    background: -ms-linear-gradient(#106f96, #2186b1);
    background: linear-gradient(#106f96, #2186b1);
}

таким же градиентом можно создать любой ховер для это кнопки
  • 0

#6 N1TAXE

N1TAXE
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 03 Декабрь 2013 - 16:05

Я понимаю, но мне нужно именно с изображением.


Вот как вам ответить, если вы не показываете ни своей картинки ни того, как вы ее вставляете? )

Короче, вашу картинку — в студию. Тогда, наверное, найдем и проблему и решение.


Изображение
Вот, прошу. Делал на скорую руку, что бы проверить. P.S: Присутствует прозрачность.
  • 0

#7 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 03 Декабрь 2013 - 23:38

N1TAXE,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tst</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.button{
  float: left;
  margin: 0.5em 0 0 0;
}
.button a{
  font: bold 12px Verdana, Geneva, "DejaVu Sans", sans-serif;
  display: block;
  width: 300px;
  height: 50px;
  line-height: 48px;
  text-decoration: none;
  background: url(button.png) 50% 0 no-repeat;
  color: #000;
  text-align: center;
}
.button a:hover{
  background: url(button.png) 50% -50px no-repeat;
  color: #fff;
}
</style>
</head>
<body>
<div class="button"><a href="#">Кнопка</a></div>
<p>Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.
И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!
— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».
(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»
— Так вон оно что! А как звать тебя?— «Власом».
— А кой тебе годик?— «Шестой миновал...
Ну, мертвая!»— крикнул малюточка басом,
Рванул под уздцы и быстрей зашагал.
На эту картину так солнце светило,
Ребенок был так уморительно мал,
Как будто все это картонное было,
Как будто бы в детский театр я попал!</p>
</body>
</html>
На всякий случай: по поводу вразумления не очень умного, но к счастью ныне редко встречающегося IE6, не понимающего прозрачность png, смотрите костыли вроде belatedPNG
  • 0

#8 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 04 Декабрь 2013 - 01:28

IE6, не понимающего прозрачность png

а я всегда с данной проблемой боролся использую gif изображения. данный формат прекрасно позволяет использовать порзрачность
  • 0

#9 sae

sae
  • Пользователь
  • 269 сообщений
  • Репутация: 79

Отправлено 04 Декабрь 2013 - 19:08

позволяет использовать порзрачность

А полупрозрачность? В случае с плавающим изображением и неоднородным фоном gif не прокатит. Поэтому все чаще возникает мысль: "ну и фиг с ним, с ослом".
  • 0

#10 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 04 Декабрь 2013 - 22:44

"ну и фиг с ним, с ослом".

да я на него забил года полтора как, шестым ослом уже никто не пользуется. я полностью на CSS3 уже перешел. пусть обновляют браузеры кому надо

21-й век на дворе. а мы до сих пор на запорожцах ездим, нет уж :)
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru