Кнопка в CSS

GRELIKTIKON

Дата: Суббота, 24.12.2011, 11:00 | Сообщение # 1

Генералиссимус

Группа: Администраторы

Сообщений: 1400

Награды: 0

Репутация: 0

Статус: Offline

Кнопка имеет класс button:

Code

Стили : обычный, и с эффектом наведения и нажатия

Code

.button {
height:30px;
border-color:#c2e254 #9bb838 #9bb838 #c2e254;
border-style:solid;
border-width:1px;
background:#c2e254;
cursor:pointer;
}

.button:hover {
border-color:#FFCC66 #FFFF99 #FFFF99 #FFCC66;
border-style:solid;
border-width:1px;
background:#FFFF99;
}

.button:focus {
background:#ddd;
border-color:#ddd #333 #333 #ddd;
border-style:solid;
border-width:1px;
}

Псевдо класс :focus отвечает за вид кнопки после нажатия, но, правда, сохраняется только до того момента пока фокус не перейдет на другой элемент. Несмотря на это и то, что IE6 не знает этот псевдо класс, я считаю его использование полезным. В качестве альтернативы, как правило, управление поведением кнопки передается JavaScript’у.

Источник : сайт

"Чем ночь темней, тем ярче звёзды"

GRELIKTIKON

Дата: Суббота, 24.12.2011, 11:01 | Сообщение # 2

Генералиссимус

Группа: Администраторы

Сообщений: 1400

Награды: 0

Репутация: 0

Статус: Offline

Кнопка с сылкой

Code

Code

<!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=windows-1251" />
<title>Untitled Document</title>
<style>

.button {
height:30px;
border-color:#c2e254 #9bb838 #9bb838 #c2e254;
border-style:solid;
border-width:1px;
background:#c2e254;
cursor:pointer;
}

.button:hover {
border-color:#FFCC66 #FFFF99 #FFFF99 #FFCC66;
border-style:solid;
border-width:1px;
background:#FFFF99;
}
.button:focus {
background:#ddd;
border-color:#ddd #333 #333 #ddd;
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<input type="button" value="Кнопка" class="button" onclick="javascript:window.location='/'" />
</body>
</html>

"Чем ночь темней, тем ярче звёзды"

GRELIKTIKON

Дата: Понедельник, 26.12.2011, 08:08 | Сообщение # 3

Генералиссимус

Группа: Администраторы

Сообщений: 1400

Награды: 0

Репутация: 0

Статус: Offline

Code

<div class="block">
<div class="blocktitle">

НАВИГАЦИЯ
</div>
<div class="blockcontent">
<div class="blockcontent_inside">
<div id="uMenuDiv1" class="uMenuV" style="position:relative;"><ul class="uMenuRoot">
<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="/"><span>ПОРТАЛ</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li>
<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="/index/legionery/0-4"><span>ЛЕГИОНЕРЫ</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li>
<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="/index/0-2"><span>АТЛАНТЫ</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li>
<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="/forum"><span>ФОРУМ</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li>
<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="/load"><span>АРХИВ</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li>
<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="/publ"><span>БИБЛИОТЕКА</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li>

<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="/photo"><span>ГАЛЕРЕЯ</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li>
<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="/index/bannery/0-5"><span>БАННЕРЫ</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li>
<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="/index/novosti/0-6"><span>НОВОСТИ</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li></ul></div><script type="text/javascript">$(function(){_uBuildMenu('#uMenuDiv1',0,document.location.href+'/','uMenuItemA','uMenuArrow',2500);})</script>
<img src="http://lastatlantida.ucoz.net/banners/banner_leg.png" border="0" alt="" />
</div>
</div>
<div class="blockbottom"></div>
</div>

"Чем ночь темней, тем ярче звёзды"