» »

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


Кнопки в стиле сайта 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>


На этом вся установка закончена.
29.09.2015 Просмотров: 437 Комментарий: (8)

Поделиться в социальных сетях

Материал разместил

Комментарий: 8
FeStemBer
FeStemBer 29.09.2015 08:261
0
Вот не плохо, только стили большие и CSS их не сохраняет, говорит, что перебор.
AnTron
AnTron 29.09.2015 08:292
0
Tventum, а что вас останавливает файлом их прописать, вы надеюсь видели текстовые файлы, подписаны CSS. Вот можете воспользоваться им. А также рекомендую основные стили, которые вы уже установили сами, прописать в этот текстовик и тогда у вас место будет много, зачем все пихать в одну корзина, она не бездонная.
FeStemBer
FeStemBer 29.09.2015 08:353
0
AnTron, спасибо, как раз статью недавно по этой теме в закладку закинул, думаю там все написано как делать.
Kosten
Kosten 29.09.2015 08:394
0
Tventum, зачем так далеко ходить, здесь недавно написал небольшой мануал по этой теме и вы можете все узнать, как установить стили в CSS когда места на нем нет.
workman
workman 29.09.2015 09:526
0
Соберите отдельным файлом и загрузите на сайт
FeStemBer
FeStemBer 29.09.2015 08:465
0
Kosten, вот спасибо, то в моей статье написано, что нужно в странице прописывать, что совершенно не хочется. Все должно стоять на своих местах. А на счет, чтоб остальные стили так сделать, это нужно, то ставить что то с CSS придется и обратно файл делать, так как места опять не хватит и освободить его под другие. Иногда идет небольшой скрипт, как к примеру этот, но у него стиль просто огромный, этот еще не так большой, есть вообще, как будто шаблон меняешь.
kos
kos 29.09.2015 10:567
0
Хорошая кнопочка!
Kosten
Kosten 30.09.2015 06:508
0
Можно скачать стандартная для светлого дизайна.
avatar