регистрация
856материалов
3264комментария
230тем на форуме
6752пользователя

Вид кнопок как на сайте Google для uCoz


Описание:

Вид кнопок как на сайте Google для uCoz. Их можно использовать на сайтах с светлым дизайном. Кнопки полностью на CSS (Cascading Style Sheets), так что с установкой проблем не будет. Сами кнопки выполнены в синих тонах, этому вы можете наглядно убедиться, посмотрев демонстрацию материала. Скрипт (CSS) не будет нагружать Ваш сайт и не повлияет на его (сайта) загрузку.

Установка:

В таблицу стилей вставляете код:
Код
.g-button {     
     display: inline-block;     
     min-width: 46px;     
     text-align: center;     
     color: #444;     
     font-size: 11px;     
     font-weight: bold;     
     height: 27px;     
     padding: 0 8px;     
     line-height: 27px;     
     -webkit-border-radius: 2px;     
     -moz-border-radius: 2px;     
     border-radius: 2px;     
     -webkit-transition: all 0.218s;     
     -moz-transition: all 0.218s;     
     -ms-transition: all 0.218s;     
     -o-transition: all 0.218s;     
     transition: all 0.218s;     
     border: 1px solid #dcdcdc;     
     background-color: #f5f5f5;     
     background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));     
     background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);     
     background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);     
     background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);     
     background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);     
     background-image: linear-gradient(top,#f5f5f5,#f1f1f1);     
     -webkit-user-select: none;     
     -moz-user-select: none;     
     user-select: none;     
     cursor: default;     
     }     
     *+html .g-button {     
     min-width: 70px;     
     }     
     button.g-button,     
     input[type=submit].g-button {     
     height: 29px;     
     line-height: 29px;     
     vertical-align: bottom;     
     margin: 0;     
     }     
     *+html button.g-button,     
     *+html input[type=submit].g-button {     
     overflow: visible;     
     }     
     .g-button:hover {     
     border: 1px solid #c6c6c6;     
     color: #333;     
     text-decoration: none;     
     -webkit-transition: all 0.0s;     
     -moz-transition: all 0.0s;     
     -ms-transition: all 0.0s;     
     -o-transition: all 0.0s;     
     transition: all 0.0s;     
     background-color: #f8f8f8;     
     background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));     
     background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);     
     background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);     
     background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);     
     background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);     
     background-image: linear-gradient(top,#f8f8f8,#f1f1f1);     
     -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);     
     -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);     
     box-shadow: 0 1px 1px rgba(0,0,0,0.1);     
     }     
     .g-button:active {     
     background-color: #f6f6f6;     
     background-image: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#f1f1f1));     
     background-image: -webkit-linear-gradient(top,#f6f6f6,#f1f1f1);     
     background-image: -moz-linear-gradient(top,#f6f6f6,#f1f1f1);     
     background-image: -ms-linear-gradient(top,#f6f6f6,#f1f1f1);     
     background-image: -o-linear-gradient(top,#f6f6f6,#f1f1f1);     
     background-image: linear-gradient(top,#f6f6f6,#f1f1f1);     
     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);     
     -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);     
     box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);     
     }     
     .g-button:visited {     
     color: #666;     
     }     
     .g-button-submit {     
     border: 1px solid #3079ed;     
     color: #fff;     
     text-shadow: 0 1px rgba(0,0,0,0.1);     
     background-color: #4d90fe;     
     background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));     
     background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);     
     background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);     
     background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);     
     background-image: -o-linear-gradient(top,#4d90fe,#4787ed);     
     background-image: linear-gradient(top,#4d90fe,#4787ed);     
     }     
     .g-button-submit:hover {     
     border: 1px solid #2f5bb7;     
     color: #fff;     
     text-shadow: 0 1px rgba(0,0,0,0.3);     
     background-color: #357ae8;     
     background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8));     
     background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);     
     background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);     
     background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);     
     background-image: -o-linear-gradient(top,#4d90fe,#357ae8);     
     background-image: linear-gradient(top,#4d90fe,#357ae8);     
     }     
     .g-button-submit:active {     
     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);     
     -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);     
     box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);     
     }

Где хотите видеть кнопку Google вставляете код:
Код
<a class="g-button g-button-submit">название кнопки</a>


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 27.09.2015 в 08:00
Материал просмотрен: 934 раза
Категория материала: Скрипты для uCoz
К материалу оставлен: 1 комментарий

Пожаловаться
Сказать спасибо
Источник

1 комментарий


webmasterivan
webmasterivan @webmasterivan 27.09.2015 16:151
+8
Красивые кнопочки
avatar
Партнерская программа uKitCPA
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 3
Гостей: 3
Пользователей: 0