Кнопки в стиле Гугла и Вконтакте для uCoz
 | |
Думаю вам знакомые кнопки в стиле Гугл и социально сети Вконтакте. Теперь вы без труда можете установить у себя на сайте, так как они созданы на чистом css. Сразу скажу, говориться о не замене всех кнопок, а просто идет стиль на каждую и небольшой код, и где хотите видать или чтоб стояла эта кнопка, вы можете ее выставить. И написать на ней, что вам нужно, или скачать, открыть, да что хотите, главное чтоб она функцию выполняла. Не стал разбрасывать по отдельности а сделал все вместе, проверил на тестовом сайте, перевел на Панель HTML кодов в материале и просто прописал, чтоб сделать изображение и посмотреть как они вообще на сайте визуально смотрятся и на светлом отлично идут. Вид кнопок как на сайте GoogleCSS Код .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="Кнопка"> Вид кнопок как ВКонтакте на ucozCSS Код .button_blue{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_blue 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, verdana, arial, sans-serif, Lucida Sans;overflow: visible;} .button_blue button::-moz-focus-inner, .button_gray button::-moz-focus-inner {border: 0;} .button_blue {border: 1px solid #4e6f93;border-top-color: #517295;background: #5D81A7;} .button_blue button {border-top-color: #789ABF;border-bottom-color: #5980A9;border-left-color: #5980A9;border-right-color: #5980A9;color: #FFF;text-shadow:0 1px 0 #45688E;*border: 0;background: url(http://st0.userapi.com/images/button_vk.png) #6181a6 repeat-x top;background-position: 0px -16px;*background-position: 0px -16px;} .button_blue button:hover, .button_blue button.hover {background-position: 0px -8px;} .button_blue button:active, .button_blue button.active {background: #5e80a5;border: 1px solid #5e80a5;position:relative;} Ставим туда, где мы хотим видеть кнопку. Код <div class="button_blue"><button id="send_post" >Отправить</button></div> PS -здесь хочется заметить, что на гугл идут большие стили, чем в VK, что нужно учесть это малый в кавычках вероятный фактор. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
