Вы можете многое сделать только с помощью CSS
Основная идея состоит в том, чтобы изменить атрибуты каждого состояния кнопки, используя псевдоклассы .cssclass:hover
для наведения курсора на состояние и .cssclass:active
для наведения мыши.
нормальное
/* style of the button in normal state */
button.css3button{
padding: 0.5em;
background-color: lightblue;
border: 4px outset green;
color: green;
border-radius: 4px;
}
:наведите курсор
/* properties that change when mouse over */
button.css3button:hover {
background-color: lightgreen;
}
:активно
/* properties that change when mouse down */
button.css3button:active {
color: yellow;
border: 4px inset red;
}
Живая демонстрация: JSFIDDLE
более сложные примеры стилей с CSS3:
<button type="button" name="" value="" class="css3button">submit</button>
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#bfc2ff 0%,
#82b4ff 25%,
#4664fa);
background: -webkit-gradient(
linear, left top, left bottom,
from(#bfc2ff),
color-stop(0.25, #82b4ff),
to(#4664fa));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
Демонстрация: JSFIDDLE
вы, конечно, можете изменить размеры, цвета, градиенты для каждого состояния :hover
:active
:visited
на свой вкус, вы можете стилизовать почти все <a> <span> <div> <button>
person
Vitim.us
schedule
05.02.2013