Web-мастер: курс молодого бойца

Кнопка в Форме. Различные возможности и действия, чтобы работало во всех Браузерах.

   

 Добавлено 2011-03-23 18:36:34



Сообщений: 1
Зарегистрирован: 23.03.2011

Цитировать
Здравствуйте!

Хочу Сделать:
1. Кнопку - Красивую (Это получилось - код ниже).
2. Чтобы она меняла цвет фона При наведении мыши (Например чтобы Посветлела Кнопка, или Потемнела), главное чтобы работало во всех трех браузерах: (Мозила, Эксплорер, Опера). Помогите подправить код - дописать, что ещё необходимо...

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">

button.new {
background: -moz-linear-gradient(#F4A460, #FF4500);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F4A460), to(#FF4500));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F4A460', endColorstr='#FF4500');
padding: 3px 7px;
color: #333;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #666;
cursor:hand;
}
</style>

</head>

<body>
<center>
<form action="">
<button class="new">кнопка</button>
</form>

</body>
</html>

Подскажите Пожалуйста!!!
Наверх  Посмотреть профиль    

 Добавлено 2011-10-08 16:59:00


Цитировать
Для наиболее простого варианта вполне достаточно в CSS ниже дописать еще один небольшой блок:

button.new:hover {

- код кнопки с другим фоном -

}
Наверх Незарегистрированный пользователь  

 Добавлено 2011-10-09 00:11:23
evgenijj
Модератор




Сообщений: 1371
Зарегистрирован: 09.11.2007

Цитировать
<html>
<head>
<title>Документ без названия</title>
<style type="text/css">
button.somebutton {
  .....
}
button.otherbutton {
  .....
}
</style>
</head>
<body>
.....
<button class="somebutton" onmouseover="this.className='otherbutton';"
onmouseout="this.className='somebutton';">кнопка</button>
.....
</body>
</html>



Денежные купюры пронумерованы для того, чтобы когда-нибудь я мог сложить их все одну к одной, по порядку.
Наверх  Посмотреть профиль   Сайт автора Отредактировано автором 09.10.2011

 Добавлено 2012-10-16 13:02:51
gcib


Сообщений: 10
Зарегистрирован: 26.08.2011

Цитировать
Я бы не рекомендовал использовать такую конструкцию. С IE проблемы будут...
На моём сайте о Алуште есть такая кнопка (смотрите "предложить статью"). Можете посмотреть CSS и взять себе на вооружение, если вам такой вариант подходит...
Наверх  Посмотреть профиль   Сайт автора Отредактировано автором 20.02.2013
   
Быстрый ответ
 
Цвет шрифта: Закрыть все теги
Сообщение
Защитный код