1. Бесплатный он-лайн генератор кнопок и логотипов — CoolText.com
2. Кнопки с эффектом нажатия
Заготовки
Код
Пример (на странице в этом блоге)
Пример (сайт на Народе)
Источник
3. Кнопки, изменяющие цвет при наведении мыши
Заготовки
Код
<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. Идея оформления кнопок
Источник
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. Идея оформления кнопок
Источник
Комментариев нет:
Отправить комментарий