» »

Светло синяя кнопка CSS с обводом для сайта


Светло синяя кнопка CSS с обводом для сайта

Если вам не устраивает, та или иная кнопка по своему дизайну, так знайте ее можно поменять, к примеру на Светло синяя кнопка CSS с обводом для сайта которая будет органично смотреться на любой тематике и даже самому оттенку цвета. Она идет одним кодом и стилем, скрипт нужет, чтоб вы к примеру заключите на вид материала слова "Читать дальше" а у вас уже по самой конструкций и визуализация будет большое изменение. Но думаю на площадке всегда найдется место, где можно поставить или изменить на новую.

Это основа, где вы будите делать ее:

Код
<a href="#" class="a_demo_one">Клацни меня!</a>


И теперь, чтоб обрела свой оригинальный вид, нам нужно в CSS поставить:

Код
.a_demo_one{background-color:#3BB3E0;padding:10px;position:relative;font-family:'Open Sans',sans-serif;font-size:12px;text-decoration:none;color:#FFF;border:solid 1px #186F8F;background-image:linear-gradient(bottom,#2CA0CA 0,#3EB8E5 100%);background-image:-o-linear-gradient(bottom,#2CA0CA 0,#3EB8E5 100%);background-image:-moz-linear-gradient(bottom,#2CA0CA 0,#3EB8E5 100%);background-image:-webkit-linear-gradient(bottom,#2CA0CA 0,#3EB8E5 100%);background-image:-ms-linear-gradient(bottom,#2CA0CA 0,#3EB8E5 100%);background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,#2CA0CA),color-stop(1,#3EB8E5));-webkit-box-shadow:inset 0 1px 0 #7FD2F1,0px 1px 0 #FFF;-moz-box-shadow:inset 0 1px 0 #7FD2F1,0px 1px 0 #FFF;box-shadow:inset 0 1px 0 #7FD2F1,0px 1px 0 #FFF;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px}  
.a_demo_one::before{background-color:#CCD0D5;content:"";display:block;position:absolute;width:100%;height:100%;padding:8px;left:-8px;top:-8px;z-index:-1;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px #909193,0px 1px 0 #FFF;-moz-box-shadow:inset 0 1px 1px #909193,0px 1px 0 #FFF;-o-box-shadow:inset 0 1px 1px #909193,0px 1px 0 #FFF;box-shadow:inset 0 1px 1px #909193,0px 1px 0 #FFF}  
.a_demo_one:active{padding-bottom:9px;padding-left:10px;padding-right:10px;padding-top:11px;top:1px;background-image:linear-gradient(bottom,#3EB8E5 0,#2CA0CA 100%);background-image:-o-linear-gradient(bottom,#3EB8E5 0,#2CA0CA 100%);background-image:-moz-linear-gradient(bottom,#3EB8E5 0,#2CA0CA 100%);background-image:-webkit-linear-gradient(bottom,#3EB8E5 0,#2CA0CA 100%);background-image:-ms-linear-gradient(bottom,#3EB8E5 0,#2CA0CA 100%);background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,#3EB8E5),color-stop(1,#2CA0CA))}
27.09.2015 Просмотров: 417 Комментарий: (12)

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

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

Комментарий: 12
workman
workman 27.09.2015 19:451
0
Классно. Подумаю теперь у себя где-нибудь поставить и перекрасить wink
Kosten
Kosten 27.09.2015 19:482
0
Под светлый дизайн, вообще альтернативы почти нет.
workman
workman 27.09.2015 19:493
0
НУ можно же покрасить ведь под любой
Kosten
Kosten 27.09.2015 21:094
0
workman, не вижу не одной ссылки на изображение, чтоб красить. А вот стилями изменить намного удобнее как здесь.
workman
workman 27.09.2015 21:145
0
Так про это я и говорю. Нафиг они вообще то файлы нужны? Если можно сделать все и стилями
Kosten
Kosten 27.09.2015 22:336
0
Обводы прозрачные сделать и будет совершенно другой дизайн.
workman
workman 27.09.2015 22:357
0
НУ тут уже на любителя. Кому нужно будет тот подредактирует а так как есть
Kosten
Kosten 27.09.2015 22:418
0
На то и стили нужны, чтоб что то свое оригинальное делать.
workman
workman 27.09.2015 22:439
0
Так вот и я про тоже самое и говорю. Картинку то хуже и дольше редактировать под себя. Да и если картинка, тоне для всех дизов может подойти, а искать порой нет времени да и иногда желания. А тут бац и все в стилях )
Сопрано
Сопрано 28.09.2015 00:0310
0
Кнопки красивые, и точно знаю, что есть у них свой эффект, при нажатие на них.
workman
workman 28.09.2015 09:3312
0
Ну как бы небольшое нажатие
kos
kos 28.09.2015 01:0611
0
Хорошая тема. Очень подойдет для новичков
avatar