RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Стильные кнопки css3
Просмотров: 3900  Скачан: 322 раз  Комментариев в теме: 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" />
Материалы по теме:

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

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

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....

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

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

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

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

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

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

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

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

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

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

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

Круговой слайдерКруговой слайдер css3

Если вы хотите эффектно представить какой либо продукт на своём сайте, но не знаете как это можно сделать. В таком случае представляю красивый слайдер...

Valenti v1.1.8Valenti v1.1.8

Многофункциональная журнальная тема с полной адаптивной вёрсткой для WordPress....

ClockerClocker

Универсальный html шаблон Clocker, на главной странице располагается слайдер, есть портфолио, выпадающее меню, заготовка контактной формы......

Фиксированная панель с навигацией на css3Фиксированная панель с навигацией на css...

Панель фиксируется внизу страницы и имеет не большую навигацию, что очень удобно если вам нужно вывести какие то важные ссылки или информацию....

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....
  • Текущий 2.20/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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