RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Сборка кнопок для сайта

Сборка кнопок на css3
Просмотров: 1605  Скачан: 215 раз  Комментариев в теме: 0

Отличная сборка кнопок на css3 для вашего сайта, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки,  круглые кнопки, анимационные).

Шаг 1 - создание разметки

 

HTML

<div align=center class="cont">
    <div class="container2">
        <a href="" title="Скачать" id="down">
            <span class="btn-title">СКАЧАТЬ</span>
            <div class="btn-info">
                <p>Скачек: 7143<br/>323.5 kb</p>
            </div>
        </a>
    </div>
    <a href="#" class="btn green">Продолжить</a>
    <a href="#" class="btn blue">Контакты</a>
    <a href="#" class="btn red">Выйти</a>
    <div class="container1">
        <a href="#" class="button button-green">Кнопка</a>
        <a href="#" class="button button-red">Кнопка</a>
        <a href="#" class="button button-blue">Кнопка</a>
        <a href="#" class="button button-orange">Кнопка</a>
        <a href="#" class="button button-pink">Кнопка</a>
        <a href="#" class="button button-purple">Кнопка</a>
        <a href="#" class="button button-darkblue">Кнопка</a>
        <a href="#" class="button button-gray">Кнопка</a>
        <a href="#" class="button rounded-button button-green">Кнопка</a>
        <a href="#" class="button rounded-button button-red">Кнопка</a>
        <a href="#" class="button rounded-button button-blue">Кнопка</a>
        <a href="#" class="button rounded-button button-orange">Кнопка</a>
        <a href="#" class="button rounded-button button-pink">Кнопка</a>
        <a href="#" class="button rounded-button button-purple">Кнопка</a>
        <a href="#" class="button rounded-button button-darkblue">Кнопка</a>
        <a href="#" class="button rounded-button button-gray">Кнопка</a>
        <a href="#" class="button circular-button button-green">1</a>
        <a href="#" class="button circular-button button-red">2</a>
        <a href="#" class="button circular-button button-blue">3</a>
        <a href="#" class="button circular-button button-orange">4</a>
        <a href="#" class="button circular-button button-pink">A</a>
        <a href="#" class="button circular-button button-purple">B</a>
        <a href="#" class="button circular-button button-darkblue">C</a>
        <a href="#" class="button circular-button button-gray">D</a>
    </div>
    <div class="container3">
        <a href="#" class="buybtn">
            <span class="buybtn-text">Купить</span>
            <span class="buybtn-hidden-text">150$</span>
            <span class="buybtn-image"><span></span></span>
        </a>
    </div>
    <div class="container3">
        <div class="buttonWrap">
            <div class="toggleButton">Скачать!</div>
            <a href="#" class="toggleSection"><span>ZIP</span>3.2 MB</a>
        </div>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.buttonWrap').click(function() {
        if ($('.toggleSection').is(":hidden")) {
            $('.toggleSection').slideDown("slow");
        } else {
            $('.toggleSection').slideUp("slow");
        }
        return false;
    });
});
</script>
Материалы по теме:

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

Неплохая социальная панель, при наведении курсора мыши, панель, плавно раскрывается, за тем уже видны сами иконки....

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на ...

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

Кнопки с градиентом на css3Кнопки с градиентом на css3

Кнопки с градиентом, такие кнопки можно встретить довольно часто......

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......
Интересные публикации:

DecadenceDecadence

Очень красивый универсальный шаблон Decadence на историческую тему, построенный на HTML5, в шаблоне имеется выпадающее меню......

Magic BoxMagic Box

Лёгкий html шаблон в тёмных тонах сделанный в виде блога, в шапке встроенный довольно привлекательный слайдер......

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

Sngine v1.6 и v1.8Sngine v1.6 и v1.8

Sngine - это движок социальной платформы, с помощью его вы можете создать социальный сайт или же онлайн сообщество....

Социальное меню с подписью на css3Социальное меню с подписью на css3

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

Обратная связь на PHP и JQuery «LightForm»Обратная связь на PHP и JQuery «LightFor...

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....
  • Текущий 1.11/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.1/5( Голосов 9 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить