Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Свежий софт


Wrecker Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Wrecker Virtual DJ
Virtual DJ
Wrecker SoundForge 11
SoundForge 11
Wrecker Alcohol 120
Alcohol 120
Wrecker Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Рекомендуем



Главная » 2013 » Декабрь » 10 » CSS3 Анимированные кнопки

21:08
CSS3 Анимированные кнопки

CSS3 Анимированные кнопки

 

 

Чтобы превратить обычную  ссылку на своей странице в анимированную  кнопку  CSS3, нужно просто присвоить кнопке класс button и один из поддерживаемых цветов. Ниже приведено несколько примеров:

 

ДЕМО                             СКАЧАТЬ

 

HTML

 

<a href="#" class="button blue big">Download</a>

<a href="#" class="button blue medium">Submit</a>

<a href="#" class="button small blue rounded">Submit</a>

 

Есть четыре класса имеющий  цвет - синий, зеленый, оранжевый и серый. Остальные классы, которые вы видите выше, не являются обязательными. Вы можете выбрать размер маленький, средний и большой, и еще один класс - закругленный, что создает более округлый вид  кнопки. Теперь давайте внимательнее посмотрим на класс CSS, который  делает это возможным.

 

CSS3 анимированными кнопками

CSS

Весь код CSS для анимированных кнопок находится в buttons.css . 

Обратите внимание, что на протяжении  кода, я определил две версии одного и того же содержания  в ряде мест. Это связано с тем, как браузеры обращаются с определениями  CSS. Они определяют правила, которые им нужны и применяют  их, не обращая внимания на те, которые они не понимают. Таким образом, мы можем иметь простую версию правил,  что понятно всем.

Кнопки / buttons.css

.button{

    font:15px Calibri, Arial, sans-serif;

 

    /* A semi-transparent text shadow */

    text-shadow:1px 1px 0 rgba(255,255,255,0.4);

 

    /* Overriding the default underline styling of the links */

    text-decoration:none !important;

    white-space:nowrap;

 

    display:inline-block;

    vertical-align:baseline;

    position:relative;

    cursor:pointer;

    padding:10px 20px;

 

    background-repeat:no-repeat;

 

    /* The following two rules are fallbacks, in case

       the browser does not support multiple backgrounds. */

 

    background-position:bottom left;

    background-image:url('button_bg.png');

 

    /* CSS3 background positioning property with multiple values. The background

       images themselves are defined in the individual color classes */

 

    background-position:bottom left, top right, 0 0, 0 0;

    background-clip:border-box;

 

    /* Applying a default border radius of 8px */

 

    -moz-border-radius:8px;

    -webkit-border-radius:8px;

    border-radius:8px;

 

    /* A 1px highlight inside of the button */

 

    -moz-box-shadow:0 0 1px #fff inset;

    -webkit-box-shadow:0 0 1px #fff inset;

    box-shadow:0 0 1px #fff inset;

 

    /* Animating the background positions with CSS3 */

    /* Currently works only in Safari/Chrome */

 

    -webkit-transition:background-position 1s;

    -moz-transition:background-position 1s;

    -o-transition:background-position 1s;

    transition:background-position 1s;

}

 

.button:hover{

 

    /* The first rule is a fallback, in case the browser

       does not support multiple backgrounds

    */

 

    background-position:top left;

    background-position:top left, bottom right, 0 0, 0 0;

}

 

Первое, что мы должны сделать, это определить класс кнопки. Это основное у кнопок, поскольку это относится к позиционированию, шрифтам  и стилям фона.

Во-первых, это стили шрифтов, после чего следует свойство дисплея. Он расположен в встроенный блок, что позволяет ему, находится на той же строке, окружающего его текста (как элемент), но и вести себя как блок в отношении отступов и полей.

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

 

 

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

Теперь необходимо  сказать несколько слов о размерах и закругленных классах.

 

/* The three buttons sizes */

 

.button.big        { font-size:30px;}

.button.medium    { font-size:18px;}

.button.small    { font-size:13px;}

 

/* A more rounded button */

 

.button.rounded{

    -moz-border-radius:4em;

    -webkit-border-radius:4em;

    border-radius:4em;

}

 

Вот три класса размеров - маленькие, средние и большие, и округлые классы. Кнопки масштабирования в соответствии с их размером  текста. Таким образом, никакой явной ширины и высоты не должно быть указано.

Теперь давайте перейдем к интересной части - цвет.  Определим только синюю кнопку, а остальные почти идентичны.

 

/* BlueButton */

 

.blue.button{

    color:#0f4b6d !important;

 

    border:1px solid #84acc3 !important;

 

    /* A fallback background color */

    background-color: #48b5f2;

 

    /* Specifying a version with gradients according to */

 

    background-image:    url('button_bg.png'), url('button_bg.png'),

                        -moz-radial-gradient(    center bottom, circle,

                                                rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),

                        -moz-linear-gradient(#4fbbf7, #3faeeb);

 

    background-image:    url('button_bg.png'), url('button_bg.png'),

                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,

                                            from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),

                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));

}

 

.blue.button:hover{

    background-color:#63c7fe;

 

    background-image:    url('button_bg.png'), url('button_bg.png'),

                        -moz-radial-gradient(    center bottom, circle,

                                           rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),

                        -moz-linear-gradient(#63c7fe, #58bef7);

 

    background-image:    url('button_bg.png'), url('button_bg.png'),

                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,

                                            from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),

                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));

}

 

 

В приведенном выше фрагменте, можно увидеть, что мы определяем линейный градиент и радиальный один поверх другого. Чтобы градиенты смешать более плавно, как в WebKit и Mozilla синтаксиса мы определяем радиальный градиент с RGBA, что делает внешний цвет градиента полностью прозрачным.

ДЕМО                             СКАЧАТЬ

Категория: CSS//HTML//JS | Просмотров: 1014 | Добавил: Wrecker | Теги: CSS3 Анимированные кнопки | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация

    • Читаемое

    Категории

    Заходи не жди

    Web Template created with Artisteer.