Главная » Интересные решения для сайтов uCoz » Ucoz » Разное для ucoz


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


Вид кнопок как на сайте Google
Вид кнопок как на сайте Google. Их можно использовать на сайтах с светлым дизайном. Кнопки полностью на 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);  
  }


Там где хотите видеть кнопку:

Код
<input type="submit" class="g-button g-button-submit" value="Кнопка">

Автор материала:
...
Логин на сайте: ...
Группа: ...
Материалов: ...
Статус: ...
О материале:
Дата добавления материала:
07.07.2016 в 23:29
Материал просмотрен: 389 раз
Категория материала:
Разное для ucoz
К материалу оставлено: 0 комментариев




Рекомендую к просмотру

Разное для ucoz - Теги в виде материалов by webo4ka.ru

Теги в виде материалов by webo4ka.ru


Скрипты - Эффект для изображения в вид материала для uCoz

Эффект для изображения в вид материала для uCoz


Разное для ucoz - SmoothScroll - Мягкий скроллинг страницы

SmoothScroll - Мягкий скроллинг страницы


Разное для ucoz - Ограничиваем длину заголовка для uCoz

Ограничиваем длину заголовка для uCoz



К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Немного информации в комментариях!
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных, например таких: uCoz.ru, forum.ucoz.ru, blog.ucoz.ru и т.п.)
4. Запрещено флудить и спамить, предлогать услуги (например: "делаю рипы, адаптации на заказ" "помогу с установкой шаблона" и т.д. )

Комментарии к материалу Вид кнопок как на сайте Google
avatar
Close
Здравствуйте Гость
Пожалуйста зарегистрируйтесь или войдите под своим логином на сайт.
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0