| Offline
Дата: Суббота, 01.09.2012, 09:35 | Сообщение # 1 |
| Красивые кнопки в стиле социальной сеть "В контакте" в зеленых тонах.
Установка: 1) Где хотим видеть вставляем html код: Code <div style="margin-right:-2px;margin-bottom:5px"> <div style="background: #dfdfdf url('http://csomsk.ru/1-ucoz/rip/56869963.png');-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;"> <div style="padding:7px"> <div style="box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);"> <div style="box-shadow: 0px 0px 0px 1px #5a9f22;border-radius: 2px;"> <a href="ссылка" style="text-decoration:none;color:#fff"><div class="iziredweplace">Пункт 1</div></a> <a href="ссылка" style="text-decoration:none;color:#fff"><div class="diziredweplace">Пункт 2</div></a> </div></div></div> </div></div> 2) В CSS вставляем следующее: Code .iziredweplace{border-radius:2px 2px 0 0;text-align:left;padding:7px;background:-moz-linear-gradient(top,#77b444,#68a338);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#77b444),color-stop(100%,#68a338));background:-webkit-linear-gradient(top,#77b444,#68a338);background:-o-linear-gradient(top,#77b444,#68a338);background:-ms-linear-gradient(top,#77b444,#68a338);background:linear-gradient(top,#77b444,#68a338);border-top:1px solid #97cd6b;border-bottom:1px solid #488019;color:#fff;text-shadow:0 1px 0 #488019;font-family:tahoma}.iziredweplace:hover{border-radius:2px 2px 0 0;text-align:left;padding:7px;background:-moz-linear-gradient(top,#6ba639,#5e982f);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#6ba639),color-stop(100%,#5e982f));background:-webkit-linear-gradient(top,#6ba639,#5e982f);background:-o-linear-gradient(top,#6ba639,#5e982f);background:-ms-linear-gradient(top,#6ba639,#5e982f);background:linear-gradient(top,#6ba639,#5e982f);border-top:1px solid #97cd6b;border-bottom:1px solid #488019;color:#fff;text-shadow:0 1px 0 #488019;font-family:tahoma}.diziredweplace{border-radius:0 0 2px 2px;text-align:left;padding:7px;background:-moz-linear-gradient(top,#77b444,#68a338);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#77b444),color-stop(100%,#68a338));background:-webkit-linear-gradient(top,#77b444,#68a338);background:-o-linear-gradient(top,#77b444,#68a338);background:-ms-linear-gradient(top,#77b444,#68a338);background:linear-gradient(top,#77b444,#68a338);border-top:1px solid #97cd6b;color:#fff;text-shadow:0 1px 0 #488019;font-family:tahoma}
.diziredweplace{border-radius:0 0 2px 2px;text-align:left;padding:7px;background:-moz-linear-gradient(top,#77b444,#68a338);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#77b444),color-stop(100%,#68a338));background:-webkit-linear-gradient(top,#77b444,#68a338);background:-o-linear-gradient(top,#77b444,#68a338);background:-ms-linear-gradient(top,#77b444,#68a338);background:linear-gradient(top,#77b444,#68a338);border-top:1px solid #97cd6b;color:#fff;text-shadow:0 1px 0 #488019;font-family:tahoma}.diziredweplace:hover{border-radius:0 0 2px 2px;text-align:left;padding:7px;background:-moz-linear-gradient(top,#6ba639,#5e982f);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#6ba639),color-stop(100%,#5e982f));background:-webkit-linear-gradient(top,#6ba639,#5e982f);background:-o-linear-gradient(top,#6ba639,#5e982f);background:-ms-linear-gradient(top,#6ba639,#5e982f);background:linear-gradient(top,#6ba639,#5e982f);border-top:1px solid #97cd6b;color:#fff;text-shadow:0 1px 0 #488019;font-family:tahoma}
|
|
|
|