Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

ΠŸΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° 10 css3 ΠΊΠ½ΠΎΠΏΠΎΠΊ / Habr

Π‘ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ Π΄Π½Π΅ΠΌ Π½ΠΎΠ²Ρ‹Π΅ стандарты css3 ΠΈ html5 всё Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡƒΠ±ΠΎΠΊΠΎ входят Π² Тизнь Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ² ΠΈ web-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ с ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ Π΄Π½Π΅ΠΌ становятся всС Π±ΠΎΠ»Π΅Π΅ совмСстимыми с этими стандартами.

Π’ связи с этим событиСм Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π’Π°ΠΌ ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΡƒ 10 css3 ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ смогут ΠΎΠ±Π»Π΅Π³Ρ‡ΠΈΡ‚ΡŒ Π²Π°ΠΌ Тизнь ΠΏΡ€ΠΈ вСрсткС ΠΈ создании web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

1. Super Awesome Buttons.


Π”Π°Π½Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π½Π°Π±ΠΎΡ€ css3 Π° Ρ‚Π°ΠΊΠΆΠ΅ раскраску RGBA.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΊ сСбС Π½Π° страницу Π½Π΅ слоТно, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ css шаблон ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ классы ΠΊ ссылкам, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… Ρ†Π²Π΅Ρ‚, Ρ„ΠΎΡ€ΠΌΡƒ ΠΈΡ‚Π΄.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ:
<a>Super Awesome Button Β»</a> 
<a>Awesome Blue Button Β»</a> 
<a>Awesome Magenta Button Β»</a> 
<a>Awesome Red Button Β»</a> 
<a>Awesome Orange Button Β»</a> 
<a>Awesome Yellow Button Β»</a>

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Super Awesome Buttons Β»
2. Google Buttons.


Π—Π° основу Π΄Π°Π½Π½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ Π±Ρ‹Π»Π° взята главная страница Google.com. Они Ρ‚Π°ΠΊΠΆΠ΅ просты ΠΈ минималистичны.
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ:
<button type="submit">Search Google</button> 
<a>I'm Feeling lucky</a>

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Google Buttons Β»
3. CSS3 Gradient Buttons.


Кнопки ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠΈ Π½Π° Super Awesome Buttons ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΎΡΡŒ Π²Ρ‹ΡˆΠ΅. Π”Π°Π½Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ прСдставлСн нСсколькими Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ (9 Ρ†Π²Π΅Ρ‚ΠΎΠ²) ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ.
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ:
<a href="#">Rectangle</a> or <a href="#">Rounded</a> Can be <a href="#">Medium</a> or <a href="#">Small</a> <input type="button" value="Input Element" /> <button>Button Tag</button> <span>Span</span> <div>Div</div> <p>P Tag</p> <h4>h4</h4>

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ CSS3 Gradient Buttons Β»
4. Kick-Ass CSS3 Button.


Данная ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅ являСтся самой интСрСсной с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΏΠΎ ссылкС Π½ΠΈΠΆΠ΅ Π²Ρ‹ смоТСтС ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊΠΎΠΌ ΠΏΠΎ созданию ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌ web-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ.

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Kick-Ass CSS3 Button Β»

5. Pure CSS social media icons.


Π­Ρ‚ΠΎΡ‚ Π½Π°Π±ΠΎΡ€ являСтся Π½Π°Π±ΠΎΡ€ΠΎΠΌ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй, Π½Π΅ΠΆΠ΅Π»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ. Набор прСдставлСн Π΄Π΅ΡΡΡ‚ΡŒΡŽ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй срСди ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Facebook, Twitter, Flickr ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΠ΅.
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ:

<ul>
   <li><a href="#non" title="Share on Facebook">Facebook</a></li>
   <li><a href="#non" title="Share on Twitter">Twitter</a></li>
   <li><a href="#non" title="Subscribe to the RSS feed">RSS</a></li>
   <li><a href="#non" title="Share on Flickr">Flickr</a></li>
   <li><a href="#non" title="Bookmark on Delicious">Delicious</a></li>
   <li><a href="#non" title="Share on LinkedIn">LinkedIn</a></li>
   <li><a href="#non" title="Bookmark with Google">Google</a></li>
   <li><a href="#non" title="Share on Orkut">Orkut</a></li>
   <li><a href="#non" title="Add to Technorati">Technorati</a></li>
   <li><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 href="#">
<span>Post</span>
</a>

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Extremely fancy CSS3 buttons Β»

7. BonBon: Sweet CSS3 buttons.


Π’Ρ‹ ΠΏΡ€ΠΈΡ€ΠΎΠΆΠ΄Π΅Π½Π½Ρ‹ΠΉ сладкоСТка? Π’ΠΎΠ³Π΄Π° эти ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π½Ρ‹ для вас. Π‘Π΄Π΅Π»Π°Π½Ρ‹ ΠΎΠ½ΠΈ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ ΠΈΡ… Ρ‚Π°ΠΊ ΠΈ хочСтся ΡΡŠΠ΅ΡΡ‚ΡŒ, ΠΈΠ»ΠΈ Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ†ΠΎΠ² ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅. Π Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π°, Ρ„ΠΎΡ€ΠΌΡ‹, состояния Π²Π°ΠΌ нСсомСнно понравятся.
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ:

<a href="">Label</a>

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ BonBon: Sweet CSS3 buttons Β»

8. Realistic Looking CSS3 Buttons.


Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ, строгиС Ρ†Π²Π΅Ρ‚Π°, закруглСния, нСсомнСнно заслуТиваСт внимания.
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ:

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

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Realistic Looking CSS3 Buttons Β»

9. Simple CSS3 Github buttons.


Π Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ Π²Ρ‹ ΡƒΠΆΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ Ρ€Π°Π½Π΅Π΅ Π½Π° github.com, ΠΎΡ‡Π΅Π½ΡŒ просты Π² установкС, ΡƒΠ΄ΠΎΠ±Π½Ρ‹ ΠΈ минималистичны. Π’Π°ΠΊΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ ΠΈΠΊΠΎΠ½ΠΎΠΊ.
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ:

<a href="#">This is a Button</a>
<a href="#">This is a Pill Button</a>
<a href="#">Divide by Zero</a>

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Simple CSS3 Github buttons Β»

10. Flexible CSS3 toggle buttons.


Π­Ρ‚ΠΈ Css3 ΠΊΠ½ΠΎΠΏΠΊΠΈ сдСланы ΠΎΡ‡Π΅Π½ΡŒ симпатично, Π½ΠΎ Π½Π΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½Ρ‹, Ρ‚ΠΊ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ Firefox, ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΡƒΠ²Ρ‹ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ.
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ:

<div>on</div><div>off</div> 
<div>on</div><div>off</div> 
<div>on</div><div>off</div> 	

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Flexible CSS3 toggle buttons Β»

habr.com

18 бСсплатных Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² CSS-ΠΊΠ½ΠΎΠΏΠΎΠΊ | CSS

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ CSS-ΠΊΠΎΠ΄Π° ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ узкоспСциализированными, ΠΈ ΠΎΠ΄Π½ΠΈ ΠΈΠ· Π½ΠΈΡ… ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для создания ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS. Π­Ρ‚ΠΈ элСмСнты управлСния ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ дСйствия. Они ΠΏΡ€ΠΈΠ·Ρ‹Π²Π°ΡŽΡ‚ посСтитСлСй ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ Π½ΠΈΡ…. ΠŸΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Π° ΠΈ ΠΏΡ€ΠΈΠ±Ρ‹Π»ΡŒ.

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ CSS3-ΠΊΠ½ΠΎΠΏΠΎΠΊ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ°. ΠŸΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ сСрвисы ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ врСмя ΠΈ силы, ΠΈ ΠΏΡ€ΠΈ этом Π½Π΅ ΡΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒΡΡ с ΠΊΠΎΠ΄ΠΎΠΌ.

Π’ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ мноТСство бСсплатных Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS, ΠΈ Π²Ρ‹ вряд Π»ΠΈ сразу Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠ΅ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹, ΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ этой ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠΎΠΉ с Π²Π°ΠΌΠΈ.

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ CSS3-ΠΊΠ½ΠΎΠΏΠΎΠΊ Magazine Fuse


Π­Ρ‚ΠΎΡ‚ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ позволяСт Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΠΈ ΠΈ Ρ„ΠΎΠ½ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Ρƒ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ.

Best CSS Button Generator


Π“Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ собствСнныС ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ подходящиС Ρ†Π²Π΅Ρ‚Π° ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… схСм. ΠšΡ€ΠΎΠΌΠ΅ этого инструмСнт позволяСт Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Ρ‚Π΅Π½ΡŒ ΠΊ тСксту, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS Tricks


Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΈ эффСкты для ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ? Π’ΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ этот конструктор ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ΄ любой Π΄ΠΈΠ·Π°ΠΉΠ½ сайта.

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Dextronet CSS


Π’Ρ‹ΠΆΠΌΠΈΡ‚Π΅ максимум ΠΈΠ· собствСнного сайта, украсив Π΅Π³ΠΎ нСвСроятно красивыми ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ. Π­Ρ‚ΠΎΡ‚ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

CSS Portal


Π”Π°Π½Π½Ρ‹ΠΉ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS прСдставляСт собой Π½Π΅ просто ΠΌΠΎΡ‰Π½Ρ‹ΠΉ инструмСнт. Он Ρ‚Π°ΠΊΠΆΠ΅ совмСстим с Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎΠΌ соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ².

CSS Button Generator


Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ вас Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ прСкрасныС ΠΊΠ½ΠΎΠΏΠΊΠΈ для собствСнного сайта. Π­Ρ‚ΠΎ быстрый ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½Ρ‹ΠΉ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ.

External CSS3 Button


Π’Π΅Π½ΠΈ, Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ, Ρ„ΠΎΠ½Ρ‹ – всС эти ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ доступны для настройки Π² этом Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ.

Da Button Factory


ΠŸΡƒΡΡ‚ΡŒ ваши CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±ΡƒΠ΄ΡƒΡ‚ идСально ΡΠΎΡ‡Π΅Ρ‚Π°Ρ‚ΡŒΡΡ с вашим сайтом. НС Π΄Π°ΠΉΡ‚Π΅ нСкрасивым ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ ΠΏΡ€Π΅ΠΏΡΡ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π²Π°ΠΌ Π½Π° ΠΏΡƒΡ‚ΠΈ ΠΊ успСху!

CSS3 Generator


Π”Π°Π½Π½Ρ‹ΠΉ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ для создания ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΠΎΠ΄ любой Π΄ΠΈΠ·Π°ΠΉΠ½. Он ΠΎΡ‡Π΅Π½ΡŒ прост Π² использовании, Π½ΠΎ ΠΏΡ€ΠΈ этом ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ мноТСство Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… настроСк.

Button Optimizer


ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ свои ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ΄ любой Π΄ΠΈΠ·Π°ΠΉΠ½ сайта. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ваши страницы Π±ΡƒΠ΄ΡƒΡ‚ Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒΡΡ быстрСС, Π° внСшний Π²ΠΈΠ΄ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡΡ.

CSS Button Generator


Π‘ΠΎΠ»ΡŒΡˆΠ΅ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ красивыС ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS для собствСнных Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ². Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π±Π΅Π· Ρ‚Ρ€ΡƒΠ΄Π° ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π°.

CSS Cook Button Generator


Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΡƒΡ‚ΠΎΠ½Ρ‡Π΅Π½Π½Ρ‹Π΅ ΠΈ ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ для вашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‚ΠΎ этот инструмСнт идСально ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ для Π΄Π°Π½Π½ΠΎΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ.

CSS Gradient Button


Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ смоТСтС ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° для стилСй ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS. ПослС этого ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚Π΅ ΠΈΡ… ΠΏΠΎ своСму вкусу, ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΠΈΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ любого сайта.

CM Buttons Generator


ΠŸΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ VML ΠΈ CSS ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ нСвСроятно красивыС ΠΊΠ½ΠΎΠΏΠΊΠΈ для Π΄ΠΈΠ·Π°ΠΉΠ½Π° любого Ρ‚ΠΈΠΏΠ° ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°.

Dynamic Drive


ΠŸΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰ΠΈΠ΅ трСбованиям Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ XHTML? Π’ΠΎΠ³Π΄Π° этот Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ создан ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для вас!

CSS3 Gen


Π­Ρ‚ΠΎΡ‚ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ HTML ΠΈ CSS-ΠΊΠΎΠ΄. Π˜Π΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт для создания соврСмСнных ΠΊΠ½ΠΎΠΏΠΎΠΊ.

CSS Drive


Π­Ρ‚ΠΎΡ‚ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π±Π΅Π· Ρ‚Ρ€ΡƒΠ΄Π° ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS для любого Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ВсС ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² любом Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

CSS3 Button Generator


Для создания ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ этим ΠΎΠ½Π»Π°ΠΉΠ½-Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠΌ.

Данная публикация прСдставляСт собой ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«18 Free CSS Button Generator – Easily create CSS3 buttonΒ» , ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄Ρ€ΡƒΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.Ρ€Ρƒ

www.internet-technologies.ru

7 самых Π»ΡƒΡ‡ΡˆΠΈΡ… Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² CSS3 ΠΊΠ½ΠΎΠΏΠΎΠΊ для Π’Π°ΡˆΠΈΡ… сайтов

ЗдравствуйтС, Π΄ΠΎΡ€ΠΎΠ³ΠΈΠ΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ Π±Π»ΠΎΠ³Π°. Π’ этот Ρ‡ΡƒΠ΄Π½Ρ‹ΠΉ дСнь я Ρ…ΠΎΡ‡Ρƒ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π’Π°ΠΌ довольно ΠΏΠΎΠ»Π΅Π·Π½ΡƒΡŽ ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΡƒ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² CSS3 ΠΊΠ½ΠΎΠΏΠΎΠΊ для Π’Π°ΡˆΠ΅Π³ΠΎ сайта.

Π― Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ эти Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ сущСствСнно ΠΎΠ±Π»Π΅Π³Ρ‡Π°Ρ‚ Π’Π°ΠΌ Π·Π°Π΄Π°Ρ‡Ρƒ с поиском Π½ΡƒΠΆΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° сайт. Π’Π°ΠΊ ΠΊΠ°ΠΊ здСсь Π’Ρ‹ смоТСтС ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ CSS ΠΊΠ½ΠΎΠΏΠΊΡƒ, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ произвСсти Π½Π°Π΄ Π½Π΅ΠΉ ΠΎΡ‡Π΅Π½ΡŒ Ρ‚ΠΎΠ½ΠΊΡƒΡŽ настройку. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ всС Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ здСсь достаточно Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹.Β 

Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ, Π΄Ρ€ΡƒΠ·ΡŒΡ, я смСло ΠΌΠΎΠ³Ρƒ ΠΏΠΎΡΠΎΠ²Π΅Ρ‚ΠΎΠ²Π°Ρ‚ΡŒ Π’Π°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ эту страницу Π² Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ.

Ну Π° Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Ρ‘ΠΌ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ.

ΠžΡ‡Π΅Π½ΡŒ красивый ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ CSS ΠΊΠ½ΠΎΠΏΠΎΠΊ для сайта. Π•ΡΡ‚ΡŒ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… шаблонов, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΈΡ… тонкая настройка.

ΠšΠ»Π°ΡΡΠ½Ρ‹ΠΉ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ мноТСство Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… CSS ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π’Π°ΠΊ ΠΆΠ΅ этот Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΎΡ‡Π΅Π½ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS.

ΠžΡ‡Π΅Π½ΡŒ просто Π½ΠΎ ΠΊ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ достаточно Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° CSS. Ρ‚ΡƒΡ‚ Π΅ΡΡ‚ΡŒ всС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π’Ρ‹ смоТСтС ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π΅ΡΡ‚ΡŒ самыС основныС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для создания красивой ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ поддСрТиваСтся Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π·Π°Π»ΠΈΠ²ΠΊΠ°.

ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ ΠΈ соврСмСнный Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ CSS3 ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° сайт. Как ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Ρ‚ΡƒΡ‚ Π΅ΡΡ‚ΡŒ всё Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΡ‚ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ для Π’Π°ΡˆΠ΅Π³ΠΎ сайта.

Π­Ρ‚ΠΎΡ‚ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ смоТСт ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡΠ°ΠΌΡƒΡŽ Π»ΡƒΡ‡ΡˆΡƒΡŽ CSS3 ΠΊΠ½ΠΎΠΏΠΊΡƒ для Вас.

Π‘Π°ΠΌΡ‹ΠΉ классный Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠžΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ мноТСство Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ. А Ρ‚Π°ΠΊ ΠΆΠ΅ присутствуСт мноТСство Π½Π΅ ΠΏΠ»ΠΎΡ…ΠΈΡ… ΡƒΠΆΠ΅ настроСнных шаблонов.

beloweb.ru

Кнопки CSS. ΠšΡ€Π°Ρ‚ΠΊΠΈΠΉ ΠΌΠ°Π½ΡƒΠ°Π» с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ

БСгодня рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ стилСй самого часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰Π΅Π³ΠΎ Π²Π΅Π±-элСмСнта, Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS. Они ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π²ΠΎ всСх Π²Π΅Π±-тСхнологиях, начиная ΠΎΡ‚ сайта заканчивая Π²Π΅Π±-ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ ΠΈ прилоТСниями. Π’ зависимости ΠΎΡ‚ создаваСмого ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ Π΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ свой Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€ внСшнСго Π²ΠΈΠ΄Π° ΠΈ ΠΏΠ°Ρ€ΠΎΠΉ хочСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π·Π°Ρ…ΠΎΠ΄ΠΈΠ» Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… стандартов. А сСйчас судя ΠΏΠΎ Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΡŽ ΠΈ возмоТностСй каскадной Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ CSS, Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ оформлСния Π½Π΅ Ρ‚Π°ΠΊ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, это ΠΏΠΎΠ΄ силу Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΈΠΌΠΈ срСдствами CSS.

ΠŸΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ ссылок

Π•Ρ‰Π΅ Π½Π΅ΠΌΠ°Π»ΠΎΠ²Π°ΠΆΠ½ΡƒΡŽ Π΄Π΅Ρ‚Π°Π»ΡŒ Π² стилях buttons css ΠΈΠ³Ρ€Π°Π΅Ρ‚ hover эффСкт – это ΠΊΠΎΠ³Π΄Π° курсор ΠΌΡ‹ΡˆΠΈ наводится Π½Π° Π²Π΅Π±-элСмСнт ΠΈ ΠΏΡ€ΠΈ этом дСйствиС ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π΅Π³ΠΎ стили. Π’ΠΎ Π΅ΡΡ‚ΡŒ, допустим, Π΅ΡΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ° с красным Ρ„ΠΎΠ½ΠΎΠΌ ΠΈ с надписью Π±Π΅Π»ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°. Π­Ρ‚ΠΎ ΠΈΠ΄Π΅Ρ‚ Π²ΠΈΠ΄ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΊΠΎΠ³Π΄Π° ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ дСйствия. Но Ссли ΠΌΡ‹ Π½Π°Π²Π΅Π΄Ρ‘ΠΌ стрСлку ΠΌΡ‹ΡˆΠΊΠΈ Π½Π° наш ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, Ρ‚ΠΎ Π΅Π΅ стили, Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ Ρ‡Π΅Ρ€Π΅Π· псСвдоэлСмСнт hover, ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² ΠΈΠ½Ρ‹Π΅, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Π±Π΅Π»Ρ‹ΠΉ Ρ„ΠΎΠ½ ΠΈ красный тСкст.

Π’Π°ΠΊΠΈΡ… псСвдоэлСмСнтов ссылки насчитываСтся всСго Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅, Π° ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΠ½ΠΈ Ρ‡Π΅Ρ€Π΅Π· Π΄Π²ΠΎΠ΅Ρ‚ΠΎΡ‡ΠΈΠ΅ с Ρ‚Π΅Π³ΠΎΠΌ ссылки a:

ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ‚ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
a:linkΠ‘Ρ‚ΠΈΠ»ΡŒ ссылки, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π΅Ρ‰Π΅ Π½Π΅ посСщали (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
a:visitedΠ‘Ρ‚ΠΈΠ»ΡŒ ссылки, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΡƒΠΆΠ΅ посСтили
a:activeΠ‘Ρ‚ΠΈΠ»ΡŒ ссылки Π²ΠΎ врСмя ΠΊΠ»ΠΈΠΊΠ° ΠΏΠΎ Π½Π΅ΠΉ
a:hoverΠ‘Ρ‚ΠΈΠ»ΡŒ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ Π½Π° Π½Π΅Π΅

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ CSS ΠΊΠ½ΠΎΠΏΠΊΡƒ

По сути, Π²Π΅Π±-ΠΊΠ½ΠΎΠΏΠΊΠ° β€” это обычная ссылка со стилями оформлСния CSS. Π§Π΅Ρ€Π΅Π· Ρ€Π°Π·Π½Ρ‹Π΅ свойства ΠΈ значСния ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ: отступы, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, Ρ†Π²Π΅Ρ‚, Ρ‚Π΅Π½ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ эффСкты. Для создания ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Π±Π΅Π· этого Π½ΠΈΠΊΠ°ΠΊ, знания каскадной Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ хотя Π±Ρ‹ Π½Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅. CSS ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ поддаСтся ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΡŽ просто Π½ΡƒΠΆΠ½ΠΎ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅, Π° Ссли Ρƒ вас Π½Π΅Ρ‚ этих Π·Π½Π°Π½ΠΈΠΉ, Ρ‚ΠΎ Π½Π΅Ρ‚ смысла Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ.

Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° сдСлаСм ΠΏΡ€ΠΎΡΡ‚Π΅Π½ΡŒΠΊΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ этапС Π±Ρ‹Π» понятСн ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ Π΅Π΅ создания. ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ ссылки <a>, Π° Π΅Ρ‰Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ button ΠΈΠ»ΠΈ input, Π½ΠΎ Ρƒ Π½ΠΈΡ… Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ другая спСциализация. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ‚Π΅Π³ΠΎΠΌ ссылки.

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ ΠΈΠ΄Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° HTML, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Ρ‚Π΅Π³ ссылки. И для Π»ΡƒΡ‡ΡˆΠ΅ΠΉ опрСдСлСнности Π΄Π°Π΄ΠΈΠΌ Π½Π°ΡˆΠ΅ΠΌΡƒ элСмСнту класс, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, wsbutton.

<a href="#">Button</a>

БСйчас ссылка ΠΈΠΌΠ΅Π΅Ρ‚ Π²ΠΈΠ΄ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ тСкста с ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ, нас Ρ‚Π°ΠΊΠΎΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½Π΅ устраиваСт. Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ, прописываСм стили оформлСния согласно своим поТСланиям.

/*ΡΡ‚ΠΈΠ»ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ*/
a.wsbutton{
    background: #3DB0F1;/*Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°*/
    border-radius: 3px;/*радиус скруглСния*/
    box-shadow: 0 -3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*внутрСння Ρ‚Π΅Π½ΡŒ*/
    color: #ffffff;/*Ρ†Π²Π΅Ρ‚ тСкста*/
    display: table;/*элСмСнт Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹*/
    font-family: sans-serif;/*сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚Π°*/
    font-size: 14px;/*Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста*/
    font-weight: bold;/*ΠΆΠΈΡ€Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚*/
    line-height: 1.5;/*высота строки*/
    padding: 10px 25px;/*Π²Π½ΡƒΡ‚Ρ€Π΅Π½ΠΈΠ΅ отступы*/
    margin:0 auto;/*Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ*/
    text-decoration: none;/*ΡƒΠ±Π΅Ρ€Π°Π΅ΠΌ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅*/
    transition: all 0.3s;/*ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ эффСкт ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°*/
}
/*стили ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π½Π° Π½Π΅Π΅*/
a.wsbutton:hover {
    background: #EB0563;/*Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°*/
    box-shadow: 0 3px 0 0 hsla(0, 0%, 0%, 0.2) inset;/*располоТСниС Ρ‚Π΅Π½ΠΈ свСрху*/
}

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ всС просто: Π² ΠΏΠ΅Ρ€Π²ΠΎΠΌ состоянии элСмСнта (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ) Π·Π°Π΄Π°Π΅ΠΌ статичныС стили. Π­Ρ‚ΠΎ Π²ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ, которая Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² Π½Π΅Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚ΠΎΠΌ состоянии. Π”Π°Π»ΡŒΡˆΠ΅ для псСвдоэлСмСнта hover прописываСм стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π½Π° Π½Π΅Π΅.

Π”Π΅ΠΌΠΎ

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS

Π― собрал Π½Π΅Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ самых Ρ€Π°Π·Π½Ρ‹Ρ… ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠΉ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ примСнСния Π½Π° своих сайтах ΠΈΠ»ΠΈ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…. Π’ состав сборки Π²Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ разновидности buttons css, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΈ с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ Bootstrap.

3d ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΠ˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Кнопки с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ Ρ„ΠΎΠ½Π°

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΠ˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π‘Ρ‚ΠΈΠ»ΡŒΠ½Ρ‹Π΅ hover эффСкты

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΠ˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Hover эффСкты

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΠ˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

30 стилСй hover эффСктов

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΠ˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Hover эффСкт Ρ‚Π΅Π½ΠΈ

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΠ˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Bootstrap button

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΠ˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Кнопки с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ Bootstrap

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΠ˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π•Ρ‰Π΅ большС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² здСсь, здСсь ΠΈ здСсь.

wordsmall.ru

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠŸΠΎΠ»Π΅Π·Π½ΠΎΡΡ‚ΠΈ admin 0 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π² HTML, Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅, Π΄ΠΈΠ·Π°ΠΉΠ½, полСзности, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Кнопки ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΊΡ€Π°Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹ΠΌ ΠΊΠ°ΠΌΠ½Π΅ΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ интСрфСйса, Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΈΡ… ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ дСнь. Они ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π°ΠΆΠ½Ρ‹ΠΌ элСмСнтом Π΄ΠΈΠ·Π°ΠΉΠ½Π° взаимодСйствия. Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ для создания интСрСсных ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π²ΠΎΡ‚ 25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΈΡ… CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π­Ρ‚ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΠ±Π»Π°Π΄Π°ΡŽΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΌΠΈ эффСктами зависания, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… содСрТат эффСкт Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°, 3D-эффСкты, Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

10 ΠΏΡ€Π°Π²ΠΈΠ» поискового продвиТСния сайта

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

  • 1 CSS Favourite Button
  • 2 CSS Border transitions
  • 3 Animation submit button
  • 4 Button bubble effect
  • 5 Transitional Buttons
  • 6 Bubbly Button
  • 7 Shiney Button
  • 8 Button Hover Animation
  • 9 Flipside
  • 10 Gradient Button
  • 11 Box/Button Hovers
  • 12 Share Button
  • 13 Button with Built-in Loading Indicator JS and SCSS
  • 14 Story Button
  • 15 Gradient Buttons with Background-Color Change (CSS-only)
  • 16 SVG Button hover effect with snap.svg
  • 17 Morphing Input Field Button
  • 18 Upload Progress Interaction
  • 19 Particle Button
  • 20 Buttons with animated background
  • 21 Liquid Button
  • 22 UI: Button morphing into form
  • 23 Buttons css hover effect
  • 24 Atom Button
  • 25 Great button animation
    • 25.1 ЭВО Π˜ΠΠ’Π•Π Π•Π‘ΠΠž!

CSS Favourite Button

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

CSS Border transitions

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Animation submit button

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Button bubble effect

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Transitional Buttons

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Bubbly Button

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Shiney Button

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Button Hover Animation

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Flipside

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Gradient Button

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Box/Button Hovers

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Share Button

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Button with Built-in Loading Indicator JS and SCSS

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Story Button

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Gradient Buttons with Background-Color Change (CSS-only)

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

SVG Button hover effect with snap.svg

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Morphing Input Field Button

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Upload Progress Interaction

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Particle Button

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Buttons with animated background

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Liquid Button

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

UI: Button morphing into form

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Buttons css hover effect

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Atom Button

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

Great button animation

25 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ 2018

20 бСсплатных Π½Π°Π±ΠΎΡ€ΠΎΠ² CSS ΠΈ SVG ΠΈΠΊΠΎΠ½ΠΎΠΊ

ЭВО Π˜ΠΠ’Π•Π Π•Π‘ΠΠž!

pt-blog.ru

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ интСрСсной ΠΊΠ½ΠΎΠΏΠΊΠΈ с использованиСм CSS3

БСгодня ΠΌΡ‹ научимся ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠ½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈΒ CSS3.Β ΠœΡ‹ стараСмся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ <button>, Π°Β Π½Π΅ <input type=»submit» />, Π½ΠΎ, Ρ‡Ρ‚ΠΎΒ Π±Ρ‹ Π²Ρ‹ Π½Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Π»ΠΈ, ΡΡ‚ΠΈΠ»ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ ΠΎΡ‚ вашСй ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмы. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ нСсколько Ρ€Π°ΡΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ…Β Π”Π°Π²Π°ΠΉΡ‚Π΅ создадим Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠ½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ стили CSS3, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ и трансформации:

Β 

Β 


ДСмонстрация Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ исходный код

HTMLΒ 

Π—Π΄Π΅ΡΡŒ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½ΠΎΠ³ΠΎ β€” Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅Π³ для кнопки:

<button>Click me!</button>

ΠœΡ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ эти стили ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅, Π½ΠΎ, Ссли Π’Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ½Π°Ρ‡Π΅, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ класс ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ target Π² CSS Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ…Β ΠΌΠ΅ΡΡ‚Π°Ρ….

CSSΒ 

Наша ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π² послСдних вСрсиях Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², Π° Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ Ρ‚Π΅Ρ€ΡΡ‚ΡŒ основныС Ρ‡Π΅Ρ€Ρ‚Ρ‹ Π² старых вСрсиях. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎΒ ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ приставки ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΉ Π² CSS Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π±Π΅Π·Β Π½ΠΈΡ… нСльзя ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Firefox, Internet Explorer 10 ΠΈ Π²Ρ‹ΡˆΠ΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ старыС вСрсии Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Opera ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹, прСобразования ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π±Π΅Π· приставок ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΉ, Π½ΠΎΒ Π½Π°ΠΌ потрСбуСтся приставка -webkit- для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Chrome, Safari ΠΈ Π½ΠΎΠ²Ρ‹Ρ… вСрсий Opera.

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ с основных стилСй, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒΒ ΠΊΠ½ΠΎΠΏΠΊΠ΅:

button
{
display: block;
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
padding: 10px 15px;
: 20px auto;
color: #ccc;
background-color: #555;
background: -webkit-linear-gradient(#888, #555);
background: linear-gradient(#888, #555);
border: 0 none;
border-radius: 3px;
text-shadow: 0 -1px 0 #000;
box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
cursor: pointer;

НичСго слишком слоТного. ΠœΡ‹ использовали Π²Π΅Π·Π΄Π΅ довольно ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ сСрый Ρ†Π²Π΅Ρ‚, Π½ΠΎΒ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ Π½ΡƒΠΆΠ½Ρ‹Π΅ Π’Π°ΠΌ Ρ†Π²Π΅Ρ‚Π°. Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ свойство background-color Π±Ρ‹Π»ΠΎ Π·Π°Π΄Π°Π½ΠΎ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹. ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ установили Π²ΠΈΠ΄ курсора ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ, нСпонятно, ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π½Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ этого ΠΏΠΎΒ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

ВСнь Π±Π»ΠΎΠΊΠ° β€” Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсноС свойство: box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6). Π­Ρ‚ΠΈΠΌ свойством ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ края ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ Π² 5px ΠΈ Π»Π΅Π³ΠΊΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π²ΠΎΠΊΡ€ΡƒΠ³Β Π½Π΅Π΅.

ΠœΡ‹ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°Π΅ΠΌ Π±Π»ΠΎΠΊ свойств, задавая, Ρ‡Ρ‚ΠΎΠ±Ρ‹ эффСкты ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΠ»ΠΈΡΡŒ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΡΡ‚ΠΈΠ»ΡŽ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ,Β ΠΈΠ»ΠΈ ΠΊΠΎΠ³Π΄Π° элСмСнт ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ фокус. Π’Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ прСфиксы ΠΈ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Π°Ρ запись для -webkit.

    -webkit-transition: all 150ms ease;

transition: all 150ms ease;
}

Β 

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ Π±Π»ΠΎΠΊΠ΅ свойств ΠΌΡ‹ Π·Π°Π΄Π°Π΄ΠΈΠΌ стили для ситуации,Β  ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ,Β ΠΈΠ»ΠΈ ΠΊΠΎΠ³Π΄Π° элСмСнт ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ фокус. Π­Ρ‚ΠΈ свойства Π·Π°Π΄Π°Π΄ΡƒΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ сияния тСкста:

button:hover, button:focus
{
-webkit-animation: pulsate 1.2s linear infinite;
animation: pulsate 1.2s linear infinite;
}
@-webkit-keyframes pulsate
{
0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
@keyframes pulsate
{
0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

Β 

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Firefox, Chrome ΠΈΒ Safari Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ 0% ΠΈΒ 100%, Π½ΠΎ Internet Explorer Π±Π΅Π·Β Π½ΠΈΡ… Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свойство Ρ‚Π΅Π½ΠΈ тСкста. НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ об этом.

Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ стили для Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ состояния кнопки:

button:active
{
color: #fff;
text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
-webkit-transform: translateY(3px);
transform: translateY(3px);
-webkit-animation: none;
animation: none;
}

Β 

Π­Ρ‚ΠΈ свойства Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΒ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

  • Анимация Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΈ тСкст ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ Π² состояниС полного сияния.
  • Кнопка сдвигаСтся Π½Π° 3 пиксСля Π²Π½ΠΈΠ· ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈΒ Β translateY.
  • Бвойство  box-shadow, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ опрСдСляСт Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ, измСняСтся Π½Π°Β  0 2px 0 #444. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΊΠ½ΠΎΠΏΠΊΠ° Π±Ρ‹Π»Π° ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π° с 5px Π΄ΠΎΒ 2px, Π½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ 3px создаСт Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡƒΡ‚ΠΎΠΏΠ»Π΅Π½Π° в страницу.
  • Π’Π½Π΅ΡˆΠ½ΡΡ Ρ‚Π΅Π½ΡŒ Ρ‚ΠΎΠΆΠ΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° располоТСна ниТС.

ΠšΠ½ΠΎΠΏΠΊΠ°Β Π³ΠΎΡ‚ΠΎΠ²Π°:

ДСмонстрация Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ исходный код

Кнопка Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΊΠ°ΠΊ Π·Π°Π΄ΡƒΠΌΠ°Π½ΠΎ, Π²ΠΎ всСх соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΡ… старых вСрсиях. ЕдинствСнная замСчСнная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° связана с вСрсиями Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Opera Π΄ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π° Π΄Π²ΠΈΠΆΠΎΠΊ Webkit β€” ΠΏΡƒΠ»ΡŒΡΠΈΡ€ΡƒΡŽΡ‰Π°Ρ анимация воспроизводится Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·. Но Π² соврСмСнных вСрсиях всС Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Β ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ.

ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠΎΠ΄, ΠΊΠ°ΠΊΒ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.

Автор ΡƒΡ€ΠΎΠΊΠ°Β CraigΒ Buckler

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄Β β€”Β Π”Π΅ΠΆΡƒΡ€ΠΊΠ°

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅Β Ρ‚Π°ΠΊΠΆΠ΅:

www.dejurka.ru

5 Ρ€Π°Π·Π½Ρ‹Ρ… Π²ΠΈΠ΄ΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS + Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠΎ установкС

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
.a_demo_three {
    background-color:#3bb3e0;
    font-family: sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    position:relative;
    padding:10px 20px;
    border-left:solid 1px #2ab7ec;
    margin-left:35px;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(44,160,202)),
        color-stop(1, rgb(62,184,229))
    );
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}
Β 
.a_demo_three:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(62,184,229)),
        color-stop(1, rgb(44,160,202))
    );
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}
Β 
.a_demo_three::before {
    background-color:#2561b4;
    content:"1";
    width:35px;
    max-height:29px;
    height:100%;
    position:absolute;
    display:block;
    padding-top:5px;
    top:0px;
    left:-36px;
    font-size:18px;
    font-weight:bold;
    color:#8fd1ea;
    text-shadow:1px 1px 0px #07526e;
    border-right:solid 1px #07526e;
    background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -o-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(10,94,125)),
        color-stop(1, rgb(14,139,184))
    );
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
    -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
    -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
    box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}
Β 
.a_demo_three:active::before {
    top:-3px;
    -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
    -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
    -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
    box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}
Β 
/*
Вторая ΠΊΠ½ΠΎΠΏΠΊΠ°
*/
Β 
.second_button::before {
    content:"2";
}
Β 
/*
Π’Ρ€Π΅Ρ‚ΡŒΡ ΠΊΠ½ΠΎΠΏΠΊΠ°
*/
Β 
.third_button::before {
    content:"3";
}

sitehere.ru