» »

Серый вид кнопки для сайта как на Vk

Серый вид кнопки для сайта как на Vk

Простоя и в тоже время стильно смотрится серая кнопка, которая по дизайн схожа как на Vk. Работает на стиле button для светлого сайта. Здесь вы сами выставляете, где вам поставить кнопку, с ней идут стили, что прописываем в CSS и код под div с классом, что ставим в тело сайта, где вам нужно, можно также под различные функций установить. Безусловно у кнопки есть свой эффект, это когда вы наводите клик.

Установка здесь не сложная, главное чтоб подходила по своей стилистике. Если немного не подходит, то вы можете в стилях изменить ее, это как оттенок и остальное. Вообщем на светлый простой дизайн это отличное приложение будет если он еще по ширине фиксирован, то кнопка сама по дизайн не велика и на широком формате ее можно поставить, другое дело как смотреться все будет.



Код кнопок, где вы хотите, там и устанавливаем.

Код
<div class="button_gray"><button>ZORNET.Ru</button></div>


CSS:

Код
.button_gray {margin: 0px 10px;}
.button_gray {text-align: center;-webkit-border-radius: 2px;-khtml-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;display: inline-block;*display: inline;position: relative;line-height: normal;zoom: 1;}
.button_gray {margin: 2px 5px;}
.button_gray button {border: 1px solid;background: none;font-size: 11px;margin: 0px;cursor: pointer;white-space: nowrap;outline: none;padding: 4px 14px;*padding: 5px 15px 3px;font-family: tahoma, arial, verdana, sans-serif, Lucida Sans;overflow: visible;}
.font_medium .button_gray button {font-size: 12px;}
.button_gray button::-moz-focus-inner {border: 0;}
.button_gray {border: 1px solid #b3b3b3;background: #e0e0e0;}
.button_gray button {border-top-color: #ffffff;border-bottom-color: #e5e5e5;border-left-color: #e7e7e7;border-right-color: #e7e7e7;color: #444;text-shadow:0 1px 0 #ffffff;*border: 0;background: url(http://zornet.ru/zorner_ru_1/Abter/button_vk.png) #dddddd repeat-x top;background-position: 0px -54px;}
.button_gray button:hover {background-position: 0px -46px;}
.button_gray button:active {background: #dcdcdc;border: 1px solid #dcdcdc;position:relative;}
.button_gray {background: url('http://zornet.ru/zorner_ru_1/Abter/upload.gif') center no-repeat;}
a.button_gray:hover {text-decoration: none;}

Так же есть под материал демонстрация на кнопки, что переходим и смотрим.
26.06.2017 Просмотров: 471 Комментарий: (1)

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

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

Комментарий: 1
Scheme
Scheme 27.06.2017 04:051
0
Что то не помню, чтоб в контакте такой дизайн был, возможно они старые и по началу такие стояли на сайте.
avatar