5 852 Скрипты / Buttons

Кнопки с эффектами CSS3

Двенадцать иконок с различными CSS3 эффектами, которые можно взять себе на вооружение. Болшинство эффектов будет работать в большинстве современных браузеров.

HTML

Разметка сразу всех 12 кнопок. Как видим у всех имеется один общий класс button_base, отличия заключены в дополнительный класс, кратко характеризующий вызываемый им CSS3 эффект:

CSS

Все стили приводить тут не будем, посмотрите их в исходнике Демо.

А для первой кнопки, дополнительный класс имеет следующие свойства (простейший пример):

        /* ### ### ### 01 */
        .b01_simple_rollover {
            color: #A3009D;
            border: #E315EA solid 1px;
            padding: 10px;
            background-color: #ffffff;
        }
 
        .b01_simple_rollover:hover {
            color: #ffffff;
            background: #e570e7;
            background: -moz-linear-gradient(top,  #e570e7 0%, #c85ec7 47%, #a849a3 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop(100%,#a849a3));
            background: -webkit-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%);
            background: -o-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%);
            background: -ms-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%);
            background: linear-gradient(to bottom,  #e570e7 0%,#c85ec7 47%,#a849a3 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 );
        }
Скачать 1891Загрузок 3,42 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи