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

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

ОБСУЖДЕНИЕ

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

Стильные кнопки css3
Просмотров: 4661  Скачан: 352 раз  Комментариев в теме: 0

При создании сайта всегда хочется удивить посетителя красивым дизайном, различными эффектами css3, анимацией и т.д, но кнопки на сейте это отдельная тема. Любой переход по сайту происходит по нажатию на кнопку (ссылку), по этому особый приоритет веб мастеру стоит ставить на дизайн кнопки, так как красивые кнопки на сайте повышают кликабельность по ссылкам, тем самым повышая просмотры вашего ресурса. В данном примере представлены довольно красивые - стильные кнопки для сайта реализованные на чистом css3, к кнопкам применены социальные иконки с красивой анимацией (вращающаяся кнопка и плавное затухание), смотрится такой эффект очень здорово.

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

 

HTML

<div class="container">
    <div class="four columns alpha">
        <a class="btn-effect1 blue-btn" href="#">
            <span class="media-left">
                <img class="img-effect1" src="img/social/twitter.png"/>
            </span>
            Twitter
            <span class="tail-right"></span>
        </a>
        <a class="btn-effect1 darkblue-btn" href="#">
            <span class="media-left">
                <img class="img-effect1" src="img/social/facebook.png"/>
            </span>
            Facebook
            <span class="tail-right"></span>
        </a>
	<br />
	<a class="btn-effect1 green-btn" href="#">
            <span class="media-left">
                <img class="img-effect1" src="img/social/envato.png"/>
            </span>
            Envato
            <span class="tail-right"></span>
	</a>
	<br />
	<a class="btn-effect1 yellow-btn" href="#">
            <span class="media-left">
                <img class="img-effect1" src="img/social/email.png"/>
            </span>
            Email Me
            <span class="tail-right"></span>
	</a>
        <a class="btn-effect1 orange-btn" href="#">
            <span class="media-left">
                <img class="img-effect1" src="img/social/rss.png"/>
            </span>
            RSS Feed
            <span class="tail-right"></span>
	</a>
	<br />		
	<a class="btn-effect1 red-btn" href="#">
            <span class="media-left">
                <img class="img-effect1" src="img/social/youtube.png"/>
            </span>
            Youtube
            <span class="tail-right"></span>
	</a>
	<br />
		<a class="btn-effect1 black-btn" href="#">
            <span class="media-left">
                <img class="img-effect1" src="img/social/google+.png"/>
            </span>
            Google+
            <span class="tail-right"></span>
	</a>
    </div>
    <div class="four columns">
	<a class="blue-btn" href="#">
            Default Button
        </a>
	<br />
	<a class="darkblue-btn" href="#">
            Default Button
	</a>
	<br />
	<a class="green-btn" href="#">
            Default Button
	</a>
	<br />
	<a class="yellow-btn" href="#">
            Default Button
	</a>
	<br />
	<a class="orange-btn" href="#">
            Default Button
	</a>
	<br />	
	<a class="red-btn" href="#">
            Default Button
	</a>
	<br />
	<a class="black-btn" href="#">
            Default Button
	</a>
    </div>
    <div class="four columns">
	<a class="btn-radius blue-btn" href="#">
            Rounded Button
	</a>
	<br />
	<a class="btn-radius darkblue-btn" href="#">
            Rounded Button
	</a>
	<br />
	<a class="btn-radius green-btn" href="#">
            Rounded Button
	</a>
	<br />
	<a class="btn-radius yellow-btn" href="#">
            Rounded Button
	</a>
	<br />	
	<a class="btn-radius orange-btn" href="#">
            Rounded Button
	</a>
	<br />	
	<a class="btn-radius red-btn" href="#">
            Rounded Button
	</a>
	<br />
	<a class="btn-radius black-btn" href="#">
            Rounded Button
	</a>
    </div>
    <div class="four columns">
	<a class="btn-effect2 blue-btn" href="#">
            <span class="tail-left"></span>
                Twitter
            <span class="media-right">
                <img class="img-effect2" src="img/social/twitter.png"/>
            </span>
        </a>
        <br />
        <a class="btn-effect2 darkblue-btn" href="#">
            <span class="tail-left"></span>
                Facebook
            <span class="media-right">
                <img class="img-effect2" src="img/social/facebook.png"/>
            </span>
        </a>
        <br />
        <a class="btn-effect2 green-btn" href="#">
            <span class="tail-left"></span>
                Envato
            <span class="media-right">
                <img class="img-effect2" src="img/social/envato.png"/>
            </span>
        </a>
        <br />
        <a class="btn-effect2 yellow-btn" href="#">
            <span class="tail-left"></span>
                Email Me
            <span class="media-right">
                <img class="img-effect2" src="img/social/email.png"/>
            </span>
        </a>
        <br />
        <a class="btn-effect2 orange-btn" href="#">
            <span class="tail-left"></span>
                RSS Feed
            <span class="media-right">
                <img class="img-effect2" src="img/social/rss.png"/>
            </span>
        </a>
        <br />
        <a class="btn-effect2 red-btn" href="#">
            <span class="tail-left"></span>
                Youtube
            <span class="media-right">
                <img class="img-effect2" src="img/social/youtube.png"/>
            </span>
        </a>
        <br />
        <a class="btn-effect2 black-btn" href="#">
            <span class="tail-left"></span>
                Google+
            <span class="media-right">
                <img class="img-effect2" src="img/social/google+.png"/>
            </span>
        </a>
    </div>
</div>

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

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />
Материалы по теме:

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

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

Социальная панель на css3Социальная панель на css3

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели, ...

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

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

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

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

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

Набор пиктограммных кнопок на css3Набор пиктограммных кнопок на css3

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......

Мега cборка социальных кнопок на css +300Мега cборка социальных кнопок на cs...

Сборка +300 социальных кнопок , это 300 разных социальных кнопок созданных на css, которые без сомнения украсят любой сайт....
Интересные публикации:

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

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

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

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

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

Красивое горизонтальное меню, используется изображения и анимация текста....

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

Фиксированная форма обратной связи на PHP и jQueryФиксированная форма обратной связи на PH...

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, JS

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...

Скроллер картинокСкроллер картинок

Красивый скроллер для вашего сайта, имеет возможность прокручиваться как в левую сторону, так и в правую......
  • Текущий 1.90/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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