Симпатичные кнопочки

Симпатичные кнопочки

Простая кнопка:

<div class="submit">
<a title="Информация для публикации" href="#">Разместить</a>
</div>


.submit {
    height: 32px;
    text-align: center;
    width: 84px;
}
.submit a {
    background: url("submit.png") repeat scroll 0 0 transparent;
    color: #555555;
    display: block;
    font: bold 11px/32px arial;
    height: 32px;
    text-decoration: none;
}
.submit a:hover {
    background-position: center center;
}
.submit a:active {
    background-position: center bottom;
}

submit.7z [1,38 Kb] (cкачиваний: 10)


Кнопки вперед-назад:

<div id="prevnext">
<div class="arrow-left">
<a class="link-left" href="#">Предыдущая</a>
</div>
<div class="arrow-right">
<a class="link-right" href="#">Далее</a>
</div>
</div>



#prevnext {
    float: right;
}
.arrow-right {
    float: right;
    height: 32px;
    width: 76px;
}
.arrow-right a {
    background: url("arrows.png") repeat scroll right top transparent;
    color: #555555;
    display: block;
    font: bold 11px/32px arial;
    height: 32px;
    padding-left: 13px;
    text-decoration: none;
}
.arrow-right a:hover {
    background-position: right center;
}
.arrow-right a:active {
    background-position: right bottom;
}



.arrow-left {
    float: left;
    height: 32px;
    width: 112px;
}
.arrow-left a {
    background: url("arrows.png") repeat scroll left top transparent;
    color: #555555;
    display: block;
    font: bold 11px/32px arial;
    height: 32px;
    padding-left: 28px;
    text-decoration: none;
}
.arrow-left a:hover {
    background-position: left center;
}
.arrow-left a:active {
    background-position: left bottom;
}

arrows.7z [2,38 Kb] (cкачиваний: 3)

И кнопка скачать в том же стиле:

<div id="openDown">
<a id="down_start" href="#">Скачать</a>
</div>



#openDown {
    float: left;
    width: 116px;
}
#down_start {
    background: url("label.png") repeat scroll center top transparent;
    color: #555555;
    display: block;
    font: bold 11px/32px arial;
    height: 32px;
    padding-left: 13px;
    text-decoration: none;
}
#down_start:hover {
    background-position: center center;
}
#down_start:active {
    background-position: center bottom;
}

label.7z [1,62 Kb] (cкачиваний: 4)


Добавить комментарий

1 Комментарий

  1. Jerry Пользователь offline автор
    Возможно на досуге натяну на Дле. Но без понятия когда руки дойдут...

Добавление комментария

Я бы хотел услышать Ваши мысли. Не стесняйтесь оставить свой комментарий и присоединиться к беседе!

2+2*2
Введите код: * Кликните на изображение чтобы обновить код, если он неразборчив