Стильные анимированные кнопки для uCoz

Кто не любит интересные и неординарные фишки на своем сайте? Мы вот любим, так же как и дешевую мягкую мебель у себя в доме. Сегодня нашли такую вот штуку - анимированные кнопочки для сайта. Подойдут под любую тематику, а выглядят очень эффектно и красиво. Пользователи наверняка порадуются, используя ваш сайт. Опять же такое чудо мы нашли от разработчиков Ucoz, сделано на CSS3, так что много места не займет и в коде не запутаетесь.

Кнопочки ввиде волшебной таблетки можно расположить в любой части страницы - правда, они походи на пилюльки - дизайн продолговатый и овальный. При наведении мышки на каждую такую кнопочку-пилюльку, она раздвигается пополам, часть с название отъезжает влево, открывая справа информацию. Например, если на вашем сайте много материалов для скачивания, внутри такой пилюльки можно спрятать описание скачиваемого файла, его размера и веса. Ну чем не оригинально? Все движения кнопочки-пилюльки происходят плавно и успевают за мышкой. Если у вас стоит просмотр видео - тоже самое. Главной информацией будет "Видео", а в открывающейся части анимированной кнопки - описание или разрешение. Кому что нравится - вперед! За вашей фантазией, а нам потом расскажите куда вы поместили свои волшебные пилюли.

Установка:

В самый низ вашего css вставляйте код из этого сайта:

#down, #demo { position:relative; padding:5px; float:left; margin:10px10px10px10px; width:230px; height:50px; display:block; text-decoration:none; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; -webkit-box-shadow:008px rgba(0,0,0,0.5); -moz-box-shadow:008px rgba(0,0,0,0.5); box-shadow:008px rgba(0,0,0,0.5); } span.btn-title { color:#fff; text-align:center; font:30px/58pxTahoma,Arial, sans-serif; height:50px; width:230px; display:block; position:relative; background: rgb(243,197,189); /* Old browsers */ background:-moz-linear-gradient(top, rgba(243,197,189,1)0%, rgba(232,108,87,1)50%, rgba(234,40,3,1)51%, rgba(255,102,0,1)75%, rgba(199,34,0,1)100%); /* FF3.6+ */ background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(243,197,189,1)), color-stop(50%, rgba(232,108,87,1)), color-stop(51%, rgba(234,40,3,1)), color-stop(75%, rgba(255,102,0,1)), color-stop(100%, rgba(199,34,0,1))); /* Chrome,Safari4+ */ background:-webkit-linear-gradient(top, rgba(243,197,189,1)0%, rgba(232,108,87,1)50%, rgba(234,40,3,1)51%, rgba(255,102,0,1)75%, rgba(199,34,0,1)100%); /* Chrome10+,Safari5.1+ */ background:-o-linear-gradient(top, rgba(243,197,189,1)0%, rgba(232,108,87,1)50%, rgba(234,40,3,1)51%, rgba(255,102,0,1)75%, rgba(199,34,0,1)100%); /* Opera 11.10+ */ background:-ms-linear-gradient(top, rgba(243,197,189,1)0%, rgba(232,108,87,1)50%, rgba(234,40,3,1)51%, rgba(255,102,0,1)75%, rgba(199,34,0,1)100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(243,197,189,1)0%, rgba(232,108,87,1)50%, rgba(234,40,3,1)51%, rgba(255,102,0,1)75%, rgba(199,34,0,1)100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0); /* IE6-9 */ -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; z-index:5; line-height:50px; -webkit-transition:width .2s ease-out; -moz-transition:width .2s ease-out; -o-transition:width .2s ease-out; } #down:hover span.btn-title, #demo:hover span.btn-title { font-size:19px; width:135px; background: rgb(211,168,165); /* Old browsers */ background:-moz-linear-gradient(top, rgba(211,168,165,1)0%, rgba(196,90,74,1)50%, rgba(198,29,3,1)51%, rgba(221,92,0,1)75%, rgba(165,24,0,1)100%); /* FF3.6+ */ background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(211,168,165,1)), color-stop(50%, rgba(196,90,74,1)), color-stop(51%, rgba(198,29,3,1)), color-stop(75%, rgba(221,92,0,1)), color-stop(100%, rgba(165,24,0,1))); /* Chrome,Safari4+ */ background:-webkit-linear-gradient(top, rgba(211,168,165,1)0%, rgba(196,90,74,1)50%, rgba(198,29,3,1)51%, rgba(221,92,0,1)75%, rgba(165,24,0,1)100%); /* Chrome10+,Safari5.1+ */ background:-o-linear-gradient(top, rgba(211,168,165,1)0%, rgba(196,90,74,1)50%, rgba(198,29,3,1)51%, rgba(221,92,0,1)75%, rgba(165,24,0,1)100%); /* Opera 11.10+ */ background:-ms-linear-gradient(top, rgba(211,168,165,1)0%, rgba(196,90,74,1)50%, rgba(198,29,3,1)51%, rgba(221,92,0,1)75%, rgba(165,24,0,1)100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(211,168,165,1)0%, rgba(196,90,74,1)50%, rgba(198,29,3,1)51%, rgba(221,92,0,1)75%, rgba(165,24,0,1)100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3a8a5', endColorstr='#a51800',GradientType=0); /* IE6-9 */ -webkit-box-shadow:1px0px0#AA1300, 0 1px 1px #AA1300; -moz-box-shadow:1px0px0#AA1300, 0 1px 1px #AA1300; box-shadow:1px0px0#AA1300, 0 1px 1px #AA1300; } .btn-info { position:absolute; height:50px; width:230px; top:5px; right:4px; -webkit-box-shadow:0-1px0#CF0404, 0 1px 1px #CF0404; -moz-box-shadow:0-1px0#CF0404, 0 1px 1px #CF0404; box-shadow:0-1px0#CF0404, 0 1px 1px #CF0404; background: rgb(207,4,4); /* Old browsers */ background:-moz-linear-gradient(top, rgba(207,4,4,1)0%, rgba(255,48,25,1)100%); /* FF3.6+ */ background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(207,4,4,1)), color-stop(100%, rgba(255,48,25,1))); /* Chrome,Safari4+ */ background:-webkit-linear-gradient(top, rgba(207,4,4,1)0%, rgba(255,48,25,1)100%); /* Chrome10+,Safari5.1+ */ background:-o-linear-gradient(top, rgba(207,4,4,1)0%, rgba(255,48,25,1)100%); /* Opera 11.10+ */ background:-ms-linear-gradient(top, rgba(207,4,4,1)0%, rgba(255,48,25,1)100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(207,4,4,1)0%, rgba(255,48,25,1)100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf0404', endColorstr='#ff3019',GradientType=0); /* IE6-9 */ -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; z-index:4; } .btn-info p { width:70px; margin:12px12px00; position:absolute; right:0; color:#EAF5FF; font:11px/12pxTahoma,Arial, sans-serif; text-align:left; }

Следующий код вставляйте в то место, где должны быть сами кнопочки:

<ahref="#"id="down"> <spanclass="btn-title">СКАЧАТЬ</span> <divclass="btn-info"> <p> Скачек: 751 <br/> 333.5 kb </p> </div> </a> <ahref="#"id="demo"> <spanclass="btn-title">ДЕМО</span> <divclass="btn-info"> <p> Посмотреть<br/> пример </p> </div> </a>