16 +
10 2018
1Чт2Пт3Сб4Вс5Пн6Вт7Ср8Чт9Пт10Сб11Вс12Пн13Вт14Ср15Чт16Пт17Сб18Вс19Пн20Вт21Ср22Чт23Пт24Сб25Вс26Пн27Вт28Ср29Чт30Пт

Скачать Красивая кнопка CSS бесплатно.

У нас вы можете ознакомиться с Красивая кнопка CSS

Данный материал предоставлен сайтом исключительно в ознакомительных целях. Если вы являетесь правообладателем какого-то файла и хотите убрать ссылку на скачивание, сообщите Нам.

Красивая кнопка CSS

Автор:  | Дата:  | Просмотра: 7,9К 



+5


Красивая кнопка CSS

Представляю Вам красивую кнопку сделанную только при помощи CSS.

1. HTML код, вставляете там, где Вам нужно:
<a href=\"http://quantum-soft.net/web/scripting/\" class=\"qs-button\">Обратная связь с администрацией сайта.</a>

Как Вы наверное уже заметили - мы присвоили ссылке свой стиль - "qs-button".

2. В свой CSS прописываем следующее.
/* Button*/  
.qs-button {
-moz-transition: all 0.3s ease 0s;
-moz-box-sizing: border-box;
background: url(\"/images/highlight_buttom.png\") repeat-x scroll center top #ECAE0F;
border: 1px solid #F3970C;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.43);
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size: 12px;
font-style: normal;
height: 26px;
line-height: 26px;
outline: medium none;
width: 400px;
padding: 0 6px;
text-align: center;
text-shadow: 0 -1px 0 #8CAD36;
}
a.qs-button {
color: #FFFFFF;
display: inline-block;
}
.qs-button:hover {
background-color: #FAB80E;
border: 1px solid #F3970C;
color: #FFFFFF;
text-decoration: none;
}
.qs-button:active {
background-color: #ECAE0F;
border: 1px solid #F3970C;
color: #FFFFFF;
outline: 0 none;
}
/*----------*/

Путем редактирование CSS вы можете изменить цвет и размер кнопки.

highlight_buttom.png (0.8 Kb)

Красивая кнопка CSS

html код кнопки
<a href=\"http://quantum-soft.net/web/scripting/\" title=\"Скачать\" id=\"down\"><span class=\"btn-title\">СКАЧАТЬ</span><div class=\"btn-info\"><p> Скачек: 7888<br/>323.5 kb</p></div></a>

в css
.content{
margin:60px auto;
width:600px;
}
#down, #demo{
position:relative;
padding:5px;
float:left;
margin:10px 10px 10px 10px;
width:230px;
height:50px;
display:block;
text-decoration:none;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
span.btn-title{
color:#fff;
text-align:center;
font:30px/58px Tahoma, Arial, sans-serif;
height:50px;
width:230px;
display:block;
position:relative;
background: rgb(243,197,189);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(243,197,189,1) 0%, rgba(232,108,87,1) 50%, rgba(234,40,3,1) 51%, rgba(255,102,0,1) 75%, rgba(199,34,0,1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,197,189,1)), color-stop(50%,rgba(232,108,87,1)), color-stop(51%,rgba(234,40,3,1)), color-stop(75%,rgba(255,102,0,1)), color-stop(100%,rgba(199,34,0,1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 );
/* IE6-9 */
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
z-index:5;
line-height:50px;
-webkit-transition:width .2s ease-out;
-moz-transition:width .2s ease-out;
-o-transition:width .2s ease-out;
}
#down:hover span.btn-title, #demo:hover span.btn-title {
font-size:19px;
width:135px;
background: rgb(211,168,165);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(211,168,165,1) 0%, rgba(196,90,74,1) 50%, rgba(198,29,3,1) 51%, rgba(221,92,0,1) 75%, rgba(165,24,0,1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(211,168,165,1)), color-stop(50%,rgba(196,90,74,1)), color-stop(51%,rgba(198,29,3,1)), color-stop(75%,rgba(221,92,0,1)), color-stop(100%,rgba(165,24,0,1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(211,168,165,1) 0%,rgba(196,90,74,1) 50%,rgba(198,29,3,1) 51%,rgba(221,92,0,1) 75%,rgba(165,24,0,1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(211,168,165,1) 0%,rgba(196,90,74,1) 50%,rgba(198,29,3,1) 51%,rgba(221,92,0,1) 75%,rgba(165,24,0,1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(211,168,165,1) 0%,rgba(196,90,74,1) 50%,rgba(198,29,3,1) 51%,rgba(221,92,0,1) 75%,rgba(165,24,0,1) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(211,168,165,1) 0%,rgba(196,90,74,1) 50%,rgba(198,29,3,1) 51%,rgba(221,92,0,1) 75%,rgba(165,24,0,1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3a8a5', endColorstr='#a51800',GradientType=0 );
/* IE6-9 */
-webkit-box-shadow: 1px 0px 0 #AA1300, 0 1px 1px #AA1300;
-moz-box-shadow: 1px 0px 0 #AA1300, 0 1px 1px #AA1300;
box-shadow:1px 0px 0 #AA1300,0 1px 1px #AA1300;
}
.btn-info {
position:absolute;
height:50px;
width:230px;
top:5px;
right:4px;
-webkit-box-shadow:0 -1px 0 #CF0404, 0 1px 1px #CF0404;
-moz-box-shadow:0 -1px 0 #CF0404, 0 1px 1px #CF0404;
box-shadow:0 -1px 0 #CF0404, 0 1px 1px #CF0404;
background: rgb(207,4,4);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(207,4,4,1) 0%, rgba(255,48,25,1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,4,4,1)), color-stop(100%,rgba(255,48,25,1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf0404', endColorstr='#ff3019',GradientType=0 );
/* IE6-9 */
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
z-index:4;
}
.btn-info p {
width:70px;
margin:12px 12px 0 0;
position:absolute;
right:0;
color:#EAF5FF;
font:11px/12px Tahoma, Arial, sans-serif;
text-align:left;
}



Скачать торрент


Готовим для Вас Бонус, пожалуйста подождите!





Поиск торрент раздач, пожалуйста подождите!

У нас вы можете скачать бесплатно Красивая кнопка CSS torrent, Скачать Красивая кнопка CSS торрент можно по ссылкам расположенным выше. Для скачивания вам понадобиться вот эта программа µTorrent.

Данный материал предоставлен сайтом Quantum-Soft.NET исключительно в ознакомительных целях.

Если вы являетесь правообладателем какого-то файла и хотите убрать ссылку на скачивание, сообщите Нам.

Ключевые теги: Красивая, кнопка





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