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

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

ОБСУЖДЕНИЕ

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

Сборка кнопок на css3
Просмотров: 1453  Скачан: 196 раз  Комментариев в теме: 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, анимация фона происходит при наведении курсора на кнопку....

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

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

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

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....

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

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

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

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

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

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

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

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

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

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery «Elas...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...

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

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....

Sooshal v2.4Sooshal v2.4

Sooshal - это первая в режиме реального времени, социальная и не социальная медиа поисковая система, которая использует новейшие данные с помощью 10 р...

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

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

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carousel»

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

WebDesignWebDesign

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

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

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

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


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