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

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

ОБСУЖДЕНИЕ

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

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

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном...

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

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

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

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

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

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

Сборка социальных кнопок на css3Сборка социальных кнопок на css3

Неплохая сборка социальных кнопок на css3, к кнопкам применён иконический шрифт....

Оригинальные кнопки на cssОригинальные кнопки на css

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

Слайдер на css3 и jqueryСлайдер на css3 и jquery

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

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu Kwic...

Стильное горизонтальное меню с выдвижными иконками

In Admin PanelIn Admin Panel

Неплохой html шаблон панели администратора, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid accordi...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

WebDesignWebDesign

Стильный шаблон построенный на HTML5, в шапке располагается слайдер, по всей ширине страницы, есть портфолио......
  • Текущий 1.13/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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