Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Анимированная кнопка Скачать на чистом CSS3
Анимированная кнопка Скачать на чистом CSS3
AndreyДата: Вторник, 10.12.2013, 19:42:00 | Сообщение # 1
Технарь
Offline
3

Прикольная анимированная кнопка Скачать, на чистом CSS3. Для того кто хочет украсить свой сайт

Смотрим мой тест на Фиддле

Теперь идём в CSS и вставляем стиль нашей кнопки:
Код
.button {
        width: 200px;
        margin: 40px 0px;
}
.button a {
        display: block;
        height: 50px;
        width: 200px;
        /*TYPE*/
        color: white;
        font: 17px/50px Helvetica, Verdana, sans-serif;
        text-decoration: none;
        text-align: center;
        text-transform: uppercase;
        /*GRADIENT*/
        background: #299a0b;
        /* Old browsers */
        background: -moz-linear-gradient(top, #299a0b 0%, #299a0b 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #299a0b), color-stop(100%, #299a0b));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #299a0b 0%, #299a0b 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #299a0b 0%, #299a0b 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #299a0b 0%, #299a0b 100%);
        /* IE10+ */
        background: linear-gradient(top, #299a0b 0%, #299a0b 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#299a0b', endColorstr='#299a0b', GradientType=0);
        /* IE6-9 */
}
.button a, .button p {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}
.button p {
        background: #222;
        display: block;
        height: 40px;
        width: 180px;
        margin: -50px 0 0 10px;
        /*TYPE*/
        text-align: center;
        font: 12px/45px Helvetica, Verdana, sans-serif;
        color: #fff;
        /*POSITION*/
        position: absolute;
        z-index: -1;
        /*TRANSITION*/
        -webkit-transition: margin 0.5s ease;
        -moz-transition: margin 0.5s ease;
        -o-transition: margin 0.5s ease;
        -ms-transition: margin 0.5s ease;
        transition: margin 0.5s ease;
}
/*HOVER*/
     .button:hover .bottom {
        margin: -10px 0 0 10px;
}
.button:hover .top {
        margin: -80px 0 0 10px;
        line-height: 35px;
}
/*ACTIVE*/
     .button a:active {
        background: #00b7ea;
        /* Old browsers */
        background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(36%, #00b7ea), color-stop(100%, #009ec3));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #00b7ea 36%, #009ec3 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #00b7ea 36%, #009ec3 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #00b7ea 36%, #009ec3 100%);
        /* IE10+ */
        background: linear-gradient(top, #00b7ea 36%, #009ec3 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea', endColorstr='#009ec3', GradientType=0);
        /* IE6-9 */
}
.button:active .bottom {
        margin: -20px 0 0 10px;
}
.button:active .top {
        margin: -70px 0 0 10px;
}


Дальше идём Страница материала и комментариев к нему, ищем:
Код
<a href="$FILE_URL$"><b>Скачать</b></a>


И заменяем на:
Код
<div class="button">
        <a href="$FILE_URL$">Скачать</a>
        <p class="top">нажмите чтобы скачать</p>
        <p class="bottom">$FILE_SIZE$$RFILE_SIZE$</p>
</div>


Всё, теперь у вас на сайте красивая и в то же время легкая кнопка

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Анимированная кнопка Скачать на чистом CSS3
Страница 1 из 11
Поиск: