Резиновые кнопки | Скрипт для сайта uCoz - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Кнопки для сайта uCoz » Резиновые кнопки | Скрипт для сайта uCoz

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Резиновые кнопки | Скрипт для сайта uCoz


Горизонтальное меню с резиновыми кнопками




Меню довольно простенькое,но в нём применяется свойство transition CSS3 в качестве эффекта перехода.Дополнтельно присутствуют теневые эффекты text-shadow и box-shadow предавая им эффектный вид.Все свойства прописаны с индивидуальными префиксами для браузеров,они должны смотреться одинаково во всех современных браузерах пользователей.Вы можете изменить цветовую палитру кнопок меню,на сайте есть достаточное количество инструментов для подбора цвета,достаточно ввести в поиске сайта подобрать цвет.Проверьте работоспособность кода воспользовавшись редактором HTML который находится ниже.Если у Вас есть вопросы,задавайте их в форме комментария к статье.




Установите код там где хотите видеть меню


<style>
#dssrechbutton a {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
-ms-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
-o-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
-ms-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
transition-duration: 0.20s;
-webkit-transition-duration: 0.20s;
-moz-transition-duration: 0.20s;
-o-transition-duration: 0.20s;
-ms-transition-duration: 0.20s;
transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
color:#fff;
background: rgba(0,0,0,0.2);
display: inline-block;
padding: 5px 15px;
outline: none;
text-decoration: none;
}
#dssrechbutton a:hover {
background: rgba(0,0,0,0.5);
padding: 5px 25px;
}
#dssrechbutton a:active {
background: rgba(0,0,0,0.1);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-o-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-ms-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
</style>
<div id="dssrechbutton">
<a href="#">Главная</a>
<a href="#">Скрипты</a>
<a href="#">Свойства</a>
<a href="#">Теги</a>
<a href="#">Фоны</a>
</div>

Проверьте код скрипта в редакторе

Вставьте код в HTML редактор и проверьте.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 3165 | Добавил: IZOTOP | Рейтинг: 4.0/2
    | Теги: меню с кнопками, streich button

    Всего комментариев: 3
    0   Спам
    3 Kirill   (25.02.2014 10:06)
    Аватар Kirill Здравствуйте! хороший сайт как сделать кнопки по вертикали ,а не по горизонтали

    0   Спам
    1 Онегин   (29.09.2013 17:43)
    Аватар Онегин Здравствуйте! Подскажите, как задать кнопкам размеры, чтобы они не подстраивались под размер текста внутри.
    И как сделать чтобы кнопка на которую нажал оставалась растянутой(как при наведении на нее). заранее спасибо

    +1   Спам
    2 IZOTOP   (03.10.2013 15:29)
    Аватар IZOTOP Привет!
    Само изменение будет касаться размеру шрифта указанному в стилях и отступам.
    Явные размеры потребуют вычисления занимаемого места в пространстве страницы, поэтому явные значения ширины и высоты заменены отступами от элемента, так легче определить значения шрифта.
    Если Вы укажите явные границы элемента всему контенту внутри придётся подстраиваться под значения величи.


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]