Кнопки в стиле сайта Google для uCoz
 | |
| Это всем знакомый дизайн и каждый думаю знает Кнопки в стиле сайта Google для uCoz где этот хостинг применяет их. Но теперь у вас есть возможность разместить их на своем сайте. Оттенок цвета у них синий и безусловно есть эффект при их нажатие или наведение. Они сами по своим стилям просты и на светлом дизайне будут смотреться великолепно, даже в том случай, если нет не чего похожего по гамме в нем. Есть большой плюс в них, то что они вообще не будут грузить ваш ресурс, да безусловно есть у каждого свой вес, но здесь он небольшой и в этом они хороши. Установка: 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); } Но этот код как догадались, устанавливаем, там где хотите ее видеть. Код <a class="g-button g-button-submit">Пишем название</a> На этом вся установка закончена. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 8 | |
|
| |
