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

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

ОБСУЖДЕНИЕ

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

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

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

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

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

Оригинальные кнопки на css3, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....

Красивые кнопки на css3Красивые кнопки на css3

Оригинальные кнопки на css3, вам дано на выбор несколько кнопок, каждая по своему привлекательна, без сомнения посетители вашего сайта не останутся ра...

Mega Web Buttons PackMega Web Buttons Pack

Mega Pack кнопок на css, в паке собрано около 40-ка кнопок с разными иконками....

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

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......

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

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....
Интересные публикации:

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

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

Оригинальная анимационная контактная формаОригинальная анимационная контактная фор...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

GridoGrido

Много функциональный шаблон Grido, шаблон обладает огромным набором возможностей его настройки....

ConsultingConsulting

Красивый html шаблон с прекрасной графикой, иконками и меню, хорошо подойдёт для бизнес проекта, в шаблоне имеется необычный слайдер......

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бумаги

Меню в оригинальном стиле, в виде потёртого клочка бумаги....

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся меню «Sc...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......
  • Текущий 1.09/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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