logo

Дополнительные типы блоков (EBT) — новый опыт конструктора страниц❗

Дополнительные типы блоков (EBT) — стилизованные, настраиваемые типы блоков: слайдшоу, вкладки, карточки, аккордеоны и многие другие. Встроенные настройки для фона, DOM Box, плагины Javascript.

Демо EBT модули Скачать EBT модули

❗Дополнительные типы параграфов (EPT) — новый опыт работы с параграфами

Дополнительные типы параграфов (EPT) — набор модулей, основанный на аналогичных параграфах.

Демо EPT модули Скачать EPT модули

Scroll
  1. Главная
  2. Форумы
  3. Drupal CMS
  4. Theming

кнопка

22/02/2025, by Гость (не проверено)
Форумы
Темизация

как сделать такую кнопку при  нажатие, грандиентом как в фотошопе, внизу жёлтый цвет а сверху бел или светло жёлтый цвет,   

Проще всего открыть какой-нибуд button generator и сделать себе такую кнопку с градиентом:

http://www.bestcssbuttongenerator.com/

 #navigation{
background: #02ffb5;
height: 38px;
width: 1000px;
margin: 0 auto;
font-size: 14px;
}


#navigation ul.menu li {
height: 30px;
}

#navigation li a{
height: 27px;
border-left: 1px solid #of687e;
border-right: 1px solid #60b9cf;
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 7px;
padding-bottom: 5px;
color: #676767;
text-decoration: none;
}

#navigation li.last a{
border-right: 0px;
}

#navigation li.first a{
border-left: 0px;
}

 

 

 

 ====================================================

сама кнопка из генератора

 

 

#navigation {

-moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
box-shadow:inset 0px 1px 0px 0px #ffe0b5;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);

background-color:#fbb450;

-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;

border:1px solid #c97e1c;

display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
font-weight:bold;
padding:2px 11px;
text-decoration:none;

text-shadow:0px 1px 0px #8f7f24;

}
#navigation:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);

background-color:#f89306;
}

 

 

забыл, написать,

не получается сделать чтобы  сама кнопка отображалась только одна при нажатие?

 

 

:hover - это стиль по наведению, :active - активная ссылка.

у меня же нет :active - активная ссылка.

 

 

 

 

 

как вот так сделать меню

Сделать, чтобы выдвигалась черная полоска? Вам нужно будет сделать на hover так

margin-top: -5px;

padding-top: 5px;

Таким образом вы поднимете блок на пикселей вверх, но контент останется на месте.