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

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

ОБСУЖДЕНИЕ

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

Стильные кнопки css3
Просмотров: 3016  Скачан: 233 раз  Комментариев в теме: 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, при наведении курсора на кнопку, она......

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

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

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

В сборку вошли 12 неплохих кнопок на css. Кнопки работают в браузерах OPERA, Firefox, Chrome, IE....

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

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

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

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

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

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

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

Free MusicFree Music

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

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

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

Слайдер картинок на JqueryСлайдер картинок на Jquery

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......

Games ThemeGames Theme

GamesTheme - мощная игровая тема для WordPress, в тёмном оформлении, тема полностью кроссбраузерная, seo оптимизированная......

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

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

Футер на cssФутер на css

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

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

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

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


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