Главная » Файлы » Прочие скрипты » CSS |
Стильные анимированные кнопочки на чистом CSS3 для вашего сайта на uCoz
24.06.14, 18:56:01 | |
Очень интересное решение, которое будет полезно практически для всех сайтов. Такие стильные кнопочки приятно радуют глаз и пользователи вашего портала наверняка заценят эту стильную фишку Для начала посмотрите ДЕМО Моё тестирование в фидле: КЛИК Установка: В самый низ вашего css вставляйте: Код #down, #demo { position:relative; padding:5px; float:left; margin:10px 10px 10px 10px; width:230px; height:50px; display:block; text-decoration:none; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); } span.btn-title { color:#fff; text-align:center; font:30px/58px Tahoma, 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: 1px 0px 0 #AA1300, 0 1px 1px #AA1300; -moz-box-shadow: 1px 0px 0 #AA1300, 0 1px 1px #AA1300; box-shadow:1px 0px 0 #AA1300, 0 1px 1px #AA1300; } .btn-info { position:absolute; height:50px; width:230px; top:5px; right:4px; -webkit-box-shadow:0 -1px 0 #CF0404, 0 1px 1px #CF0404; -moz-box-shadow:0 -1px 0 #CF0404, 0 1px 1px #CF0404; box-shadow:0 -1px 0 #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:12px 12px 0 0; position:absolute; right:0; color:#EAF5FF; font:11px/12px Tahoma, Arial, sans-serif; text-align:left; } Следующий код вставляйте в то место, где должны быть сами кнопочки: Код <a href="#" id="down"> <span class="btn-title">СКАЧАТЬ</span> <div class="btn-info"> Скачек: 751 <br/> 333.5 kb </p> </div> </a> <a href="#" id="demo"> <span class="btn-title">ДЕМО</span> <div class="btn-info"> Посмотреть<br/> пример </p> </div> </a> За основу материала взята ЭТА статья Материал подготовлен Apocalypse | |
Просмотров: 429 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |