Синяя кнопка для сайта юКоз - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Суббота, 10.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



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



Синяя кнопка для сайта юКоз

Синяя кнопка с градиентами и псевдоэлементами CSS3




Кнопка выглядит как настоящая,применение новых свойств градиентов и псевдоэлементов добавляют ей реалистичный вид.При нажатии вообще кажется что она утапливается в страницу,приколюшной получилась,нечего сказать.Настроена кнопка как надо,будут советы или вопросы опишите их здесь.





Код кнопки для установки


<style>
.dsbutonblue {
background-color:#3bb3e0;
padding:10px;
position:relative;
font-family: 'Impact';
font-size:14px;
text-decoration:none;
text-shadow: 1px 2px 3px #000;
color:#fff;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
-o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.dsbutonblue:hover{
color:#fff;
text-decoration:none;
}
.dsbutonblue::before {
background-color:#072239;
content:"";
display:block;
position:absolute;
width:100%;
height:100%;
padding-left:2px;
padding-right:2px;
padding-bottom:4px;
left:-2px;
top:5px;
z-index:-1;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 1px 0px #fff;
-moz-box-shadow: 0px 1px 0px #fff;
-o-box-shadow: 0px 1px 0px #fff;
box-shadow: 0px 1px 0px #fff;
}
.dsbutonblue:active {
color:#156785;
text-decoration:none;
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
background:rgb(44,160,202);
-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
-o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
top:7px;
}
.dsbutonblue:active::before {
top:-2px;
}
</style>
<div style="clear:both;margin:15px;">
<a href="#" class="dsbutonblue">
Нажми меня
</a>
</div>



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

Вставьте код кнопки для установки в HTML редактор и проверьте.









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



Ссылка:
BB code:




  • ©
  • | Просмотров: 2725 | Добавил: IZOTOP | Рейтинг: 4.0/1
    | Теги: blue, CSS3, button, кнопку

    Всего комментариев: 1
    +1   Спам
    1 Михаил4695   (27.01.2013 12:48)
    Аватар Михаил4695 а в какую строку вписывать сайт, для перехода после нажатия?)


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