"Красивые" кнопки

[Envy]

Напишите пожалуйста статью как делать кнопки типа как на мафии в горизонтальном меню, т.е сначала она черного цвета , при наведении синего, или серого->черного, а то до меня не доходит, как это реализовать 

[WOLF]

в css прописвать класс, с добавление .a hover

[Envy]

WOLF, а потом, как я понял <div id="названиекласса"> ? 

[WOLF]

WOLF, а потом, как я понял <div id="названиекласса"> ? 

да

[Envy]

WOLF, можно пример кода из ipb_styles.css? 

[WOLF]

WOLF, можно пример кода из ipb_styles.css? 

#community_app_menu > li > a {
		color: #cacaca;
		color: rgba(255,255,255,0.7);
		display: block;
		outline: none;
		padding: 0px 12px;
		line-height: 32px;
		height: 32px;
	}

	#community_app_menu > li > a:hover {
		background: url("{style_images_url}/trans10.png") repeat;
		background: rgba(0,0,0,0.1);
		color: #fff;
	}

[Envy]

WOLF, Спасибо большое! 

[Lordbl4]

как в этом случае сделать так, чтобы фон был на всю полосу меню а не отступал от нижнего края на 3 пикселя? кнопка быстрого перехода нормально выделяется при наведении, а в остальном меню отступ идёт

Изменено 21 мая, 2013 пользователем Lordbl4

[WOLF]

как в этом случае сделать так, чтобы фон был на всю полосу меню а не отступал от нижнего края на 3 пикселя? кнопка быстрого перехода нормально выделяется при наведении, а в остальном меню отступ идёт

дай ссылку

[Lordbl4]

на локале тестирую, могу код скинуть необходимый

[WOLF]

на локале тестирую, могу код скинуть необходимый

Давай

[Lordbl4]

элемены меню при наведении отображаются с отступом от нижнего края, справа быстрый переход (как я понял quickNavLaunch) нормально отображается при наведении

 

	#community_app_menu > li { margin: 0px 1px 0 0; position: relative; }

	
	#community_app_menu > li > a {
		color: #FFF;
		display: block;
		font-size:14px;
		padding:12px 9px;
		font-weight:400;
		text-shadow: 0 1px 0 rgba(0,0,0,.4);
		text-decoration:none;
		-webkit-transition: all 0.35s ease;
		-moz-transition: all 0.35s ease;
		-o-transition: all 0.35s ease;
		transition: all 0.35s ease;
		text-transform:uppercase;
	}

		
		#community_app_menu > li > a:hover, #community_app_menu > li > a.menu_active, #community_app_menu > li.active > a {
			background: #ff00ff url({style_images_url}/glow.png) repeat-x;
			color:#FFF;
			outline: 0;
			-webkit-transition: all 0.1s linear;
			-moz-transition: all 0.1s linear;
			-ms-transition: all 0.1s linear;
			-o-transition: all 0.1s linear;
			transition: all 0.1s linear;
		}
		
		#icon-nav_app_forums ul.nav a:hover, #icon-nav_app_forums ul.nav a, #icon-nav_app_forums .active a { border-radius: 0 !important; }
		#icon-nav_app_forums a:hover, #icon-nav_app_forums a, #icon-nav_app_forums .active a { border-radius:3px 0 0 3px; }
		a#quickNavLaunch, a#quickNavLaunch:hover { border-radius:0 3px 3px 0; margin-right: -1px; }

Изменено 21 мая, 2013 пользователем Lordbl4

[WOLF]

элемены меню при наведении отображаются с отступом от нижнего края, справа быстрый переход (как я понял quickNavLaunch) нормально отображается при наведении

 

	#community_app_menu > li { margin: 0px 1px 0 0; position: relative; }

	
	#community_app_menu > li > a {
		color: #FFF;
		display: block;
		font-size:14px;
		padding:12px 9px;
		font-weight:400;
		text-shadow: 0 1px 0 rgba(0,0,0,.4);
		text-decoration:none;
		-webkit-transition: all 0.35s ease;
		-moz-transition: all 0.35s ease;
		-o-transition: all 0.35s ease;
		transition: all 0.35s ease;
		text-transform:uppercase;
	}

		
		#community_app_menu > li > a:hover, #community_app_menu > li > a.menu_active, #community_app_menu > li.active > a {
			background: #ff00ff url({style_images_url}/glow.png) repeat-x;
			color:#FFF;
			outline: 0;
			-webkit-transition: all 0.1s linear;
			-moz-transition: all 0.1s linear;
			-ms-transition: all 0.1s linear;
			-o-transition: all 0.1s linear;
			transition: all 0.1s linear;
		}
		
		#icon-nav_app_forums ul.nav a:hover, #icon-nav_app_forums ul.nav a, #icon-nav_app_forums .active a { border-radius: 0 !important; }
		#icon-nav_app_forums a:hover, #icon-nav_app_forums a, #icon-nav_app_forums .active a { border-radius:3px 0 0 3px; }
		a#quickNavLaunch, a#quickNavLaunch:hover { border-radius:0 3px 3px 0; margin-right: -1px; }

 

редактируешь: 

padding: 12px 9px;

на свой вкус

[Lordbl4]

частично решено, спасибо.

Изменено 21 мая, 2013 пользователем Lordbl4

[WOLF]

частично решено, спасибо.

можно кодом:

height: ..px ;

подправить

[Envy]

WOLF,не получается использовать(

 вывожу дивом - ничего не происходит 

Изменено 21 мая, 2013 пользователем Envy

[WOLF]

WOLF,не получается использовать(

 вывожу дивом - ничего не происходит 

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

 

[Envy]

WOLF, я не меню редактирую, с меню все норм, я вообще)

WOLF,напиши статью( 

[Envy]

Пытаюсь сделать такой эффект на этих кнопках, ничего не получается, они просто перекашиваются..

_trade-team.ru снизу, где статистика "набор модераторов", "контакты администрации", "группа в Steamcommunity"

[WOLF]

.i_am_fedya_link {
padding-top: 8px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
line-height: 1.3;
overflow: hidden;
-webkit-box-shadow: 0px 1px 0px white;
-moz-box-shadow: 0px 1px 0px #fff;
box-shadow: 0px 1px 0px white;
border: 1px solid #D8D8D8;
border-radius: 3px;
background: #fff;
}

+++++

.i_am_fedya_link : hover {
padding-top: 8px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
line-height: 1.3;
overflow: hidden;
-webkit-box-shadow: 0px 1px 0px white;
-moz-box-shadow: 0px 1px 0px #fff;
box-shadow: 0px 1px 0px white;
border: 1px solid #D8D8D8;
border-radius: 3px;
background: #000;
}

пробуй

оба кода должны быть в ipb_style.css 

[Envy]

.i_am_fedya_link : hover { padding-top: 8px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; line-height: 1.3; overflow: hidden; -webkit-box-shadow: 0px 1px 0px white; -moz-box-shadow: 0px 1px 0px #fff; box-shadow: 0px 1px 0px white; border: 1px solid #D8D8D8; border-radius: 3px; background: #000; }

не изменяется, только блок в середине уходит в лево