qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Сборка кнопок на css3
Просмотров: 1656  Скачан: 220 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

Неплохие кнопки для вашего сайта на css3, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....

VIP кнопка на css3VIP кнопка на css3

Красивая анимационная кнопка с эффектом блеска, при наведении курсора на кнопку, происходит красивая анимация на фоне кнопки....

Pack кнопок #2 на CSS3Pack кнопок #2 на CSS3

Pack кнопок 2, в паке представлены 20 кнопок на css3 с разными иконками....

Социальные иконки на css3Социальные иконки на css3

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

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

Кнопки с градиентом, такие кнопки можно встретить довольно часто......
Интересные публикации:

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Меню с выпадающими пунктами на css

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

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

Good Inc v1.2.1Good Inc v1.2.1

Стильный журнальный шаблон для WordPress в светлом минималистском стиле....

Super Changer v2.1Super Changer v2.1

SuperChanger - это адаптивный журнальный шаблон для wordpress. Основным преимуществом шаблона является разнообразие цветовых стилей оформления......

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

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

Горизонтальное меню с выдвигающимися иконкамиГоризонтальное меню с выдвигающимися ико...

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

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

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....
  • Текущий 1.11/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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