Поточний час:
Сьогодні 22 листопада, середа 2017 рік

Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 3 дня

Ваш ip адрес:54.162.166.214

Добрий вечір!
Ви обновили сторінку в 20 : 28

Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers
Код бібліотеки стилів css для створення кнопок, копіюємо, зберігаємо, розміщуємо в
кореневому каталозі сайту, додаємо лінк, і кнопку.
Лінк  <link rel="stylesheet" type="text/css" href="buttonize.min.css">
Кнопка <a href=”#” class=”button”>Кнопка</a>
.button{
	display:inline-block;
	height:27px;
	border:2px solid #333;
	outline:0;
	margin:4px 6px;
	padding-left:16px;
	padding-right:16px;
	font:13px/27px Helvetica,Arial,sans-serif;
	text-shadow:1px 1px 1px #FFF;
	text-align:center;
	cursor:pointer;
	-moz-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:inset 1px 1px 5px rgba(255,255,255,0.2),0 0 4px rgba(255,255,255,0.5);
	-webkit-box-shadow:inset 1px 1px 5px rgba(255,255,255,0.2),0 0 4px rgba(255,255,255,0.5);
	box-shadow:inset 1px 1px 5px rgba(255,255,255,0.2),0 0 4px rgba(255,255,255,0.5);
	background-color:#e0e0e0;background-image:url(images/gradient.png);
	background-image:-moz-linear-gradient(top,#f7edff,#b1b1b1);
	background-image:-webkit-linear-gradient(top,#f7edff,#b1b1b1);
	background-image:-ms-linear-gradient(top,#f7edff,#b1b1b1);
	background-image:-o-linear-gradient(top,#f7edff,#b1b1b1);
	background-image:linear-gradient(top,#f7edff,#b1b1b1);
	-moz-background-clip:padding;-webkit-background-clip:padding-box;
	background-clip:padding-box
	}
	.button:link,.button:visited,.button:hover{
	color:#444;text-decoration:none
	}
	.button:hover,.button:focus{
	background-image:-moz-linear-gradient(top,#f5f5ff,#999);
	background-image:-webkit-linear-gradient(top,#f5f5ff,#999);
	background-image:-ms-linear-gradient(top,#f5f5ff,#999);
	background-image:-o-linear-gradient(top,#f5f5ff,#999);
	background-image:linear-gradient(top,#f5f5ff,#999)
	}
	.button:active{
	position:relative;
	top:1px;
	-moz-box-shadow:inset 0 0 8px rgba(80,80,80,0.5);
	-webkit-box-shadow:inset 0 0 8px rgba(80,80,80,0.5);
	box-shadow:inset 0 0 8px rgba(80,80,80,0.5)
	}
	.big{
	font-size:17px;
	height:38px;
	line-height:38px;
	padding-left:23px;
	padding-right:23px;
	-moz-border-radius:8px;
	border-radius:8px
	}
	.small{
	font-size:11px;
	height:20px;
	line-height:20px;
	border:1px solid #333;
	padding-left:8px;
	padding-right:8px;
	-moz-border-radius:4px;border-radius:4px
	}
	.left,.middle{border-right-width:0
	}
	.left,.middle,.right{
	margin:0
	}
	.left:active,.middle:active,.right:active
	{
	top:0
	}
	.left{
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;
	border-top-right-radius:0;
	border-bottom-right-radius:0
	}
	.right
	{
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;
	border-top-left-radius:0;
	border-bottom-left-radius:0
	}
	.middle,.square
	{
	-moz-border-radius:0;
	border-radius:0
	}
	.arrow,.heart,.star
	{
	padding-left:12px
	}
	.arrow:before,.heart:before,.star:before
	{
	padding-right:5px;
	vertical-align:-15%
	}
	.arrow:before
	{
	content:url(images/arrow.png)
	}
	.heart:before
	{content:url(images/heart.png)
	}
	.star:before
	{
	content:url(images/star.png)
	}
	.stripe:link,.stripe:visited
	{
	background-image:url(images/bg_stripe.png),-moz-linear-gradient(top,#f7edff,#b1b1b1);
	background-image:url(images/bg_stripe.png),-webkit-linear-gradient(top,#f7edff,#b1b1b1);
	background-image:url(images/bg_stripe.png),-ms-linear-gradient(top,#f7edff,#b1b1b1);
	background-image:url(images/bg_stripe.png),-o-linear-gradient(top,#f7edff,#b1b1b1);
	background-image:url(images/bg_stripe.png),linear-gradient(top,#f7edff,#b1b1b1)
	}
	.stripe:hover,.stripe:focus
	{
	background-image:url(images/bg_stripe.png),-moz-linear-gradient(top,#f5f5ff,#999);
	background-image:url(images/bg_stripe.png),-webkit-linear-gradient(top,#f5f5ff,#999);
	background-image:url(images/bg_stripe.png),-ms-linear-gradient(top,#f5f5ff,#999);
	background-image:url(images/bg_stripe.png),-o-linear-gradient(top,#f5f5ff,#999);
	background-image:url(images/bg_stripe.png),linear-gradient(top,#f5f5ff,#999)
	}
	.stripe:active{-moz-box-shadow:inset 0 0 8px rgba(80,80,80,0.5);
	-webkit-box-shadow:inset 0 0 8px rgba(80,80,80,0.5);
	box-shadow:inset 0 0 8px rgba(80,80,80,0.5)
	}
	.disabled
	{
	border-color:#CCC;
	background:#e0e0e0;
	color:#CCC;cursor:default;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
	opacity:.7;-ms-filter:"alpha(opacity=70)";
	filter:alpha(opacity=70)
	}
	.disabled:hover,.disabled:active,.disabled:focus
	{
	top:0;background:#e0e0e0;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none
	}
	.blue:link,.blue:visited,.red:link,.red:visited,.green:link,.green:visited,.orange:link,.orange:visited,.purple:link,.purple:visited,.black:link,.black:visited
	{
	color:#FFF;
	font-weight:bold;
	text-shadow:0 1px 1px rgba(0,0,0,0.6)
	}
	.blue{
	border-color:#003b80;
	background-color:#004ca3;
	background-image:-webkit-linear-gradient(top,#006ce8,#004ca3);
	background-image:-moz-linear-gradient(top,#006ce8,#004ca3);
	background-image:-ms-linear-gradient(top,#006ce8,#004ca3);
	background-image:-o-linear-gradient(top,#006ce8,#004ca3);
	background-image:linear-gradient(top,#006ce8,#004ca3);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#006CE8',EndColorStr='#004CA3')
	}
	.blue:hover,.blue:focus
	{
	background-color:#003b80;
	background-image:-webkit-linear-gradient(top,#006ce8,#003b80);
	background-image:-moz-linear-gradient(top,#006ce8,#003b80);
	background-image:-ms-linear-gradient(top,#006ce8,#003b80);
	background-image:-o-linear-gradient(top,#006ce8,#003b80);
	background-image:linear-gradient(top,#006ce8,#003b80);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#006CE8',EndColorStr='#003B80')
	}
	.red
	{
	border-color:#b50000;
	background-color:#d00000;
	background-image:-webkit-linear-gradient(top,#F33,#d00000);
	background-image:-moz-linear-gradient(top,#F33,#d00000);
	background-image:-ms-linear-gradient(top,#F33,#d00000);
	background-image:-o-linear-gradient(top,#F33,#d00000);
	background-image:linear-gradient(top,#F33,#d00000);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FF3333',EndColorStr='#D00000')
	}
	.red:hover,.red:focus
	{
	background-color:#b50000;
	background-image:-webkit-linear-gradient(top,#F33,#b50000);
	background-image:-moz-linear-gradient(top,#F33,#b50000);
	background-image:-ms-linear-gradient(top,#F33,#b50000);
	background-image:-o-linear-gradient(top,#F33,#b50000);
	background-image:linear-gradient(top,#F33,#b50000);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FF3333',EndColorStr='#B50000')
	}
	.green{border-color:#279100;
	background-color:#2ead00;
	background-image:-webkit-linear-gradient(top,#3fed00,#2ead00);
	background-image:-moz-linear-gradient(top,#3fed00,#2ead00);
	background-image:-ms-linear-gradient(top,#3fed00,#2ead00);
	background-image:-o-linear-gradient(top,#3fed00,#2ead00);
	background-image:linear-gradient(top,#3fed00,#2ead00);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#3FED00',EndColorStr='#2EAD00')
	}
	.green:hover,.green:focus
	{
	background-color:#279100;
	background-image:-webkit-linear-gradient(top,#3fed00,#279100);
	background-image:-moz-linear-gradient(top,#3fed00,#279100);
	background-image:-ms-linear-gradient(top,#3fed00,#279100);
	background-image:-o-linear-gradient(top,#3fed00,#279100);
	background-image:linear-gradient(top,#3fed00,#279100);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#3FED00',EndColorStr='#279100')
	}
	.orange{border-color:#da7c0c;
	background-color:#faa51a;
	background-image:-webkit-linear-gradient(top,#faa51a,#f47a20);
	background-image:-moz-linear-gradient(top,#faa51a,#f47a20);
	background-image:-ms-linear-gradient(top,#faa51a,#f47a20);
	background-image:-o-linear-gradient(top,#faa51a,#f47a20);
	background-image:linear-gradient(top,#faa51a,#f47a20);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#faa51a',EndColorStr='#f47a20')
	}
	.orange:hover,.orange:focus
	{
	background-color:#da7c0c;background-image:-webkit-linear-gradient(top,#faa51a,#da7c0c);
	background-image:-moz-linear-gradient(top,#faa51a,#da7c0c);
	background-image:-ms-linear-gradient(top,#faa51a,#da7c0c);
	background-image:-o-linear-gradient(top,#faa51a,#da7c0c);
	background-image:linear-gradient(top,#faa51a,#da7c0c);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#faa51a',EndColorStr='#da7c0c')
	}
	.purple{border-color:#609;background-color:#ca00d1;
	background-image:-webkit-linear-gradient(top,#ca00d1,#aa00b0);
	background-image:-moz-linear-gradient(top,#ca00d1,#aa00b0);
	background-image:-ms-linear-gradient(top,#ca00d1,#aa00b0);
	background-image:-o-linear-gradient(top,#ca00d1,#aa00b0);
	background-image:linear-gradient(top,#ca00d1,#aa00b0);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#CA00D1',EndColorStr='#AA00B0')
	}
	.purple:hover,.purple:focus
	{
	background-color:#609;
	background-image:-webkit-linear-gradient(top,#ca00d1,#609);
	background-image:-moz-linear-gradient(top,#ca00d1,#609);
	background-image:-ms-linear-gradient(top,#ca00d1,#609);background-image:-o-linear-gradient(top,#ca00d1,#609);
	background-image:linear-gradient(top,#ca00d1,#609);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#CA00D1',EndColorStr='#660099')
	}
	.black
	{
	border-color:#000;
	background-color:#333;
	background-image:-webkit-linear-gradient(top,#666,#333);
	background-image:-moz-linear-gradient(top,#666,#333);
	background-image:-ms-linear-gradient(top,#666,#333);
	background-image:-o-linear-gradient(top,#666,#333);
	background-image:linear-gradient(top,#666,#333);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666',EndColorStr='#333333')
	}
	.black:hover,.black:focus
	{
	background-color:#000;
	background-image:-webkit-linear-gradient(top,#666,#000);
	background-image:-moz-linear-gradient(top,#666,#000);
	background-image:-ms-linear-gradient(top,#666,#000);
	background-image:-o-linear-gradient(top,#666,#000);
	background-image:linear-gradient(top,#666,#000);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666',EndColorStr='#000000')
	}
	.bold{font-weight:bold!important
	}
	.underline
	{
	text-decoration:underline!important
	}
	.italic
	{
	font-style:italic!important
	}
	.highlight:link,.highlight:visited,.highlight:hover,.highlight:focus
	{
	-moz-box-shadow:0 0 20px #FFF;
	-webkit-box-shadow:0 0 20px #FFF;
	box-shadow:0 0 20px #FFF
	}
	.highlight:active{
	-moz-box-shadow:0 0 28px #FFF;
	-webkit-box-shadow:0 0 28px #FFF;
	box-shadow:0 0 28px #FFF
	}

Leave a Reply

Your email address will not be published. Required fields are marked *