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

Всегда в теме

Статистика


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


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

Рекомендуем



Главная » 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 | Просмотров: 709 | Добавил: Wrecker | Теги: CSS3 Анимированные кнопки | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

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

    Категории

    Заходи не жди