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

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

ОБСУЖДЕНИЕ

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

Стильные кнопки css3
Просмотров: 2836  Скачан: 225 раз  Комментариев в теме: 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 кнопок #3 на CSS3Pack кнопок #3 на CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

Lotus Flower v1.2Lotus Flower v1.2

Lotus Flower - это современный универсальный шаблон для WordPress с адаптивной вёрсткой и большим функционалом....

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

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

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

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

OblivionOblivion

Oblivion - это отличное решение для создания игрового портала с обзорами компьютерных игр и т.д....

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Выпадающее меню в темном стиле, реализованное полностью на css...

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

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....

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

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......
  • Текущий 2.55/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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