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

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

ОБСУЖДЕНИЕ

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

Стильные кнопки css3
Просмотров: 3601  Скачан: 307 раз  Комментариев в теме: 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 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансфор...

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

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

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

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

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

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

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

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

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

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

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

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

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

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

Jquery меню горизонтальноеJquery меню горизонтальное с анимированн...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изображе...

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

CharismaCharisma

Профессиональный шаблон административной панели, построенный на HTML5, в шаблоне имеются: закладки, меню, галерея, набор кнопок......

Набор элементов дизайна «CSS3 Responsive Forms Pack»Набор элементов дизайна «CSS3 Responsive...

Это профессиональный набор элементов дизайна ( кнопки, формы, Checkbox и многое другое)....

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....
  • Текущий 2.42/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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