Код бібліотеки стилів 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 }