1. Бесплатный он-лайн генератор кнопок и логотипов —
CoolText.com
2. Кнопки с эффектом нажатия
Заготовки
bg_button_span.gif
|
bg_button_a.gif
|
Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Красивые кнопочки</title>
<style type="text/css">
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button:active {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
</style>
</head>
<body>
<a class="button" href="#" onclick="this.blur();"><span> … </span></a>
</body>
</html>
Пример (на странице в этом блоге)
Пример (сайт на Народе)
Источник
3. Кнопки, изменяющие цвет при наведении мыши
Заготовки
gradient1.jpg
|
gradient2.jpg
|
Код
<script type="text/javascript" language="JavaScript">
<!--
if (document.images)
{
pic1on= new Image(170,33);
pic1on.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYG3K_Tk4MxCJ1lNIQ5q9UCs80W_o_kFHHL1I2UmokCtVM4xR37ktRoShGWU7jIdG4gsi3VraR6Wu6P00kfUlhmksRjDd5F-Y-WS_N70BAKnvYNgBLfWwPt9fgGKMC6UatINEkjdJ4ETs/s320/gradient1.jpg";
pic1off= new Image(170,33);
pic1off.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-YMk8HRJYy2H9dfoq-IvJXraYVGROMVAftvaQg3-YkP3bAC3tpgk6u0BOkF6YGBP4kAPBf6QPQnKOsvCDNJ1aBbCgo994e6ByQIvTHevoBXOrbwEKPOFvY61jkA5zkn9YuR8JAmo6F0/s1600/gradient2.jpg";
pic2on= new Image(170,33);
pic2on.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYG3K_Tk4MxCJ1lNIQ5q9UCs80W_o_kFHHL1I2UmokCtVM4xR37ktRoShGWU7jIdG4gsi3VraR6Wu6P00kfUlhmksRjDd5F-Y-WS_N70BAKnvYNgBLfWwPt9fgGKMC6UatINEkjdJ4ETs/s320/gradient1.jpg";
pic2off= new Image(170,33);
pic2off.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-YMk8HRJYy2H9dfoq-IvJXraYVGROMVAftvaQg3-YkP3bAC3tpgk6u0BOkF6YGBP4kAPBf6QPQnKOsvCDNJ1aBbCgo994e6ByQIvTHevoBXOrbwEKPOFvY61jkA5zkn9YuR8JAmo6F0/s1600/gradient2.jpg";
}
function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}
function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}
//
-->
</SCRIPT>
<table border="0" width="100%" cellspacing="1" bgcolor="#FFFFFF" cellpadding="0">
<tr>
<td bgcolor="#FFFFFFFF" width="170" align="center" valign="top">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center" height="1">
</td>
</tr>
<tr>
<td align="center">
<a onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')" href="#">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYG3K_Tk4MxCJ1lNIQ5q9UCs80W_o_kFHHL1I2UmokCtVM4xR37ktRoShGWU7jIdG4gsi3VraR6Wu6P00kfUlhmksRjDd5F-Y-WS_N70BAKnvYNgBLfWwPt9fgGKMC6UatINEkjdJ4ETs/s320/gradient1.jpg" name="pic1" width="170" height="33" alt="#">
</a>
</td>
</tr>
<tr>
<td align="center">
<a onMouseover="lightup('pic2')" onMouseout="turnoff('pic2')" href="#">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYG3K_Tk4MxCJ1lNIQ5q9UCs80W_o_kFHHL1I2UmokCtVM4xR37ktRoShGWU7jIdG4gsi3VraR6Wu6P00kfUlhmksRjDd5F-Y-WS_N70BAKnvYNgBLfWwPt9fgGKMC6UatINEkjdJ4ETs/s320/gradient1.jpg" name="pic2" width="170" height="33" alt="#">
</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Пример (на странице в этом блоге)
Источник
4. Идея оформления кнопок
Источник
