` ` ` Web-хитрости и не только...: Функциональные кнопки на сайт

Функциональные кнопки на сайт

На ваш суд представлены несколько видов функциональных кнопок для сайта или блога. На базе представленных можно сотворить ряд кнопок иного вида, стоит лишь изменить цвет текста и(или) фона, а также сменить картинку (где она необходима). Основное - код CSS, который является "двигателем" изображения.

Копируйте коды, понравившихся вам кнопок, и устанавливайте себе на WEB страницы.

засветка

Код CSS между тегами <head> </head>:

<style type="text/css">
.rssbutton{ background-color: #ff6600; border: 10px #ff6600 outset; padding: 0 2px; text-decoration: none; font: bold 18px Verdana; }
.rssbutton:visited, .rssbutton:hover, .rssbutton:active{ color: white; }
</style>

Код HTML (количество кнопок по необходимости) между тегами <body> </body>:

<a href="#1" class="rssbutton">Кнопка</a>

нажатие

Код CSS между тегами <head> </head>:

<style type="text/css">
.cssbut2{
background-color: #d1ec4c;
border: 10px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 18px Verdana;
}
.cssbut2:visited{
color: black;
}
.cssbut2{
background-color: #bde6f3;
border-color: #bde6f3;
margin-left: 6px;
}
.cssbut2:hover{
border-style: inset;
color: black;
background-color: #e3f48e;
padding: 2px 3px 0 5px;
}
.cssbut2:active{
color: black;
}
.cssbut2:hover{
background-color: #dbf2f9;
}
</style>

Код HTML (количество кнопок по необходимости) между тегами <body> </body>:

<a href="#1" class="cssbut2">Кнопка</a>

увеличение

Код CSS между тегами <head> </head>:

<style>
a.vsl { text-decoration:none; color:#000; border-bottom:dashed 0px #000; }
a.vsl div { display:none;}
a.vsl:hover { position:relative; }
a.vsl:hover div { position:absolute; display:block; left:-10px; top:-32px; border:solid 0px #000; white-space:pre; padding:1px;}
</style>

Код HTML (количество кнопок по необходимости) между тегами <body> </body>:

<a class="vsl" href="#1"><img
src="http://vvfed1.ucoz.com/blogfiles/butonblog.jpg" alt="РМ" border="0" width="100">
<div align="center"><img src="http://vvfed1.ucoz.com/blogfiles/butonblog.jpg" alt="РМ" border="0" width="120"></div></a>

увеличение с тенью

Код CSS между тегами <head> </head>:

<style>
.MARIME img{
-webkit-transform:scale(0.7);
-moz-transform:scale(0.7);
-o-transform:scale(0.7);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.5;
margin: 0 10px 5px 0;
}
.MARIME img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
</style>

Код HTML (количество кнопок по необходимости) между тегами <body> </body>:

<div class="MARIME"><a href="#1"><img src="http://vvfed1.ucoz.com/blogfiles/butonblog.jpg" /></a></div>

моргает

Код CSS между тегами <head> </head>:

<style type="text/css">
a{color:#0000FF; text-decoration:none; }
body { font-size:14px; font-family:verdana; }
A:hover { BACKGROUND-IMAGE: url(http://vvfed1.ucoz.com/blogfiles/silkacolor.gif); }
</style>

Код HTML (количество кнопок по необходимости) между тегами <body> </body>:

<a href="#1"><font style="border: 2px solid #0000ff; font-weight:bold; font-size:16px; font-family:verdana;"> КНОПКА </font></a>

переливается

Между тегами <head> </head> Ява-скрипт:

<script type='text/javascript'> //<![CDATA[ var rate = 20; if (document.getElementById) window.onerror=new Function("return true") var objActive; // The object which event occured in var act = 0; // Flag during the action var elmH = 0; // Hue var elmS = 128; // Saturation var elmV = 255; // Value var clrOrg; // A color before the change var TimerID; // Timer ID if (document.all) { document.onmouseover = doRainbowAnchor; document.onmouseout = stopRainbowAnchor; } else if (document.getElementById) { document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); document.onmouseover = Mozilla_doRainbowAnchor; document.onmouseout = Mozilla_stopRainbowAnchor; } function doRainbow(obj) { if (act == 0) { act = 1; if (obj) objActive = obj; else objActive = event.srcElement; clrOrg = objActive.style.color; TimerID = setInterval("ChangeColor()",100); } } function stopRainbow() { if (act) { objActive.style.color = clrOrg; clearInterval(TimerID); act = 0; } } function doRainbowAnchor() { if (act == 0) { var obj = event.srcElement; while (obj.tagName != 'A' && obj.tagName != 'BODY') { obj = obj.parentElement; if (obj.tagName == 'A' || obj.tagName == 'BODY') break; } if (obj.tagName == 'A' && obj.href != '') { objActive = obj; act = 1; clrOrg = objActive.style.color; TimerID = setInterval("ChangeColor()",100); } } } function stopRainbowAnchor() { if (act) { if (objActive.tagName == 'A') { objActive.style.color = clrOrg; clearInterval(TimerID); act = 0; } } } function Mozilla_doRainbowAnchor(e) { if (act == 0) { obj = e.target; while (obj.nodeName != 'A' && obj.nodeName != 'BODY') { obj = obj.parentNode; if (obj.nodeName == 'A' || obj.nodeName == 'BODY') break; } if (obj.nodeName == 'A' && obj.href != '') { objActive = obj; act = 1; clrOrg = obj.style.color; TimerID = setInterval("ChangeColor()",100); } } } function Mozilla_stopRainbowAnchor(e) { if (act) { if (objActive.nodeName == 'A') { objActive.style.color = clrOrg; clearInterval(TimerID); act = 0; } } } function ChangeColor() { objActive.style.color = makeColor(); } function makeColor() { // Don't you think Color Gamut to look like Rainbow? // HSVtoRGB if (elmS == 0) { elmR = elmV; elmG = elmV; elmB = elmV; } else { t1 = elmV; t2 = (255 - elmS) * elmV / 255; t3 = elmH % 60; t3 = (t1 - t2) * t3 / 60; if (elmH < 60) { elmR = t1; elmB = t2; elmG = t2 + t3; } else if (elmH < 120) { elmG = t1; elmB = t2; elmR = t1 - t3; } else if (elmH < 180) { elmG = t1; elmR = t2; elmB = t2 + t3; } else if (elmH < 240) { elmB = t1; elmR = t2; elmG = t1 - t3; } else if (elmH < 300) { elmB = t1; elmG = t2; elmR = t2 + t3; } else if (elmH < 360) { elmR = t1; elmG = t2; elmB = t1 - t3; } else { elmR = 0; elmG = 0; elmB = 0; } } elmR = Math.floor(elmR).toString(16); elmG = Math.floor(elmG).toString(16); elmB = Math.floor(elmB).toString(16); if (elmR.length == 1) elmR = "0" + elmR; if (elmG.length == 1) elmG = "0" + elmG; if (elmB.length == 1) elmB = "0" + elmB; elmH = elmH + rate; if (elmH >= 360) elmH = 0; return '#' + elmR + elmG + elmB; } //]]> </script>

Код HTML (количество кнопок по необходимости) между тегами <body> </body>:

<a href="#1"><font style="border: 2px solid #0000ff; font-weight:bold; font-size:16px; font-family:verdana;"> КНОПКА </font></a>

КНОПКА

Создать эффект тени при наведении курсора на текст можно посредством нижеизложенного кода CSS:

<style type="text/css"> #rachmath:hover .rachma, #rachmath.hover_effect .rachma {text-shadow: 0 0 10px #000} </style>

Код HTML:

<div id="rachmath">
<div class="rachma" id="rachmath">
Кнопка
</div>
</div>

Чтобы украсить свою WEB-страницу еще лучше, воспользуйтесь генератором кнопок - ГЕНЕРАТОР КНОПОК.

...Дерзайте...