Pull to refresh

Подборка 10 css3 кнопок

Reading time 4 min
Views 91K
С каждым днем новые стандарты css3 и html5 всё более глубоко входят в жизнь верстальщиков и web-разработчиков, а браузеры с каждым днем становятся все более совместимыми с этими стандартами.



В связи с этим событием хотелось бы представить Вам подборку 10 css3 кнопок, которые смогут облегчить вам жизнь при верстке и создании web приложений.

1. Super Awesome Buttons.



Данный набор кнопок использует набор css3 а также раскраску RGBA.

Добавить данный набор кнопок к себе на страницу не сложно, необходимо подключить css шаблон и добавить необходимые классы к ссылкам, чтобы изменить их цвет, форму итд.

Пример подключения:

<a class="large awesome">Super Awesome Button »</a> 
<a class="large blue awesome">Awesome Blue Button »</a> 
<a class="large magenta awesome">Awesome Magenta Button »</a> 
<a class="large red awesome">Awesome Red Button »</a> 
<a class="large orange awesome">Awesome Orange Button »</a> 
<a class="large yellow awesome">Awesome Yellow Button »</a>

Подробнее о Super Awesome Buttons »

2. Google Buttons.



За основу данных кнопок была взята главная страница Google.com. Они также просты и минималистичны.

Пример подключения:

<button type="submit" class="g-button">Search Google</button> 
<a class="g-button">I'm Feeling lucky</a>

Подробнее о Google Buttons »

3. CSS3 Gradient Buttons.



Кнопки очень похожи на Super Awesome Buttons о которых говорилось выше. Данный набор представлен несколькими цветами (9 цветов) и различными формами.

Пример подключения:


<a href="#" class="button black">Rectangle</a>  or
<a href="#" class="button black bigrounded">Rounded</a> Can be
<a href="#" class="button black medium">Medium</a> or 
<a href="#" class="button black small">Small</a> 
<input class="button black" type="button" value="Input Element" /> 
<button class="button black">Button Tag</button> 
<span class="button black">Span</span> 
<div class="button black">Div</div> 
<p class="button black">P Tag</p> 
<h3 class="button black">H3</h3> 

Подробнее о CSS3 Gradient Buttons »

4. Kick-Ass CSS3 Button.



Данная кнопка не является самой интересной с точки зрения дизайна, однако по ссылке ниже вы сможете ознакомиться с видеоуроком по созданию подобных кнопок, что будет полезно начинающим web-разработчикам.

Подробнее о Kick-Ass CSS3 Button »

5. Pure CSS social media icons.



Этот набор является набором иконок социальных сетей, нежели кнопок. Набор представлен десятью иконками социальных сетей среди которых Facebook, Twitter, Flickr и прочие.

Пример подключения:


<ul>
   <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
   <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li>
   <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li>
   <li class="flickr"><a href="#non" title="Share on Flickr">Flickr</a></li>
   <li class="delicious"><a href="#non" title="Bookmark on Delicious">Delicious</a></li>
   <li class="linkedin"><a href="#non" title="Share on LinkedIn">LinkedIn</a></li>
   <li class="google"><a href="#non" title="Bookmark with Google">Google</a></li>
   <li class="orkut"><a href="#non" title="Share on Orkut">Orkut</a></li>
   <li class="technorati"><a href="#non" title="Add to Technorati">Technorati</a></li>
   <li class="netvibes"><a href="#non" title="Add to NetVibes">NetVibes</a></li>
</ul>


Подробнее о Pure CSS social media icons »

6. Extremely fancy CSS3 buttons.




Все владельцы iOs устроиств несоменно узнают данные кнопки, подобные кнопки присутствуют в iOs устроиствах начиная с первых версий. Эти кнопки, как и многие здесь представленые имеют настройки цвета, размера и сделаны на чистом css3.

Пример подключения:


<a class="fancy_button" href="#">
<span style="background-color: #070;">Post</span>
</a>


Подробнее о Extremely fancy CSS3 buttons »

7. BonBon: Sweet CSS3 buttons.



Вы прирожденный сладкоежка? Тогда эти кнопки придуманы для вас. Сделаны они так, что их так и хочется съесть, или в конце концов применить в своем проекте. Различные цвета, формы, состояния вам несоменно понравятся.

Пример подключения:


<a href="" class="button orange glossy">Label</a>


Подробнее о BonBon: Sweet CSS3 buttons »

8. Realistic Looking CSS3 Buttons.



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

Пример подключения:


<a href="#" class="button">Pushit</a>


Подробнее о Realistic Looking CSS3 Buttons »

9. Simple CSS3 Github buttons.



Реализацию подобных кнопок вы уже видели ранее на github.com, очень просты в установке, удобны и минималистичны. Также возможно добавление к кнопкам иконок.

Пример подключения:


<a href="#" class="button">This is a Button</a>
<a href="#" class="pill button">This is a Pill Button</a>
<a href="#" class="negative button">Divide by Zero</a>


Подробнее о Simple CSS3 Github buttons »

10. Flexible CSS3 toggle buttons.



Эти Css3 кнопки сделаны очень симпатично, но не практичны, тк реализованы только с поддержкой Firefox, остальные браузеры увы не поддерживаются.

Пример подключения:


<div class="toggleOnleft">on</div><div class="toggleOFFright">off</div> 
<div class="toggleOFFleft">on</div><div class="toggleONright">off</div> 
<div class="toggleDisabledleft">on</div><div class="toggleDisabledright">off</div> 	


Подробнее о Flexible CSS3 toggle buttons »
Tags:
Hubs:
+188
Comments 79
Comments Comments 79

Articles