ΠΠΎΠ΄Π±ΠΎΡΠΊΠ° 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
CSS Border transitions
Animation submit button
Button bubble effect
Transitional Buttons
Bubbly Button
Shiney Button
Button Hover Animation
Flipside
Gradient Button
Box/Button Hovers
Button with Built-in Loading Indicator JS and SCSS
Story Button
Gradient Buttons with Background-Color Change (CSS-only)
SVG Button hover effect with snap.svg
Morphing Input Field Button
Upload Progress Interaction
Particle Button
Buttons with animated background
Liquid Button
UI: Button morphing into form
Buttons css hover effect
Atom Button
Great button animation
ΠΠ’Π ΠΠΠ’ΠΠ ΠΠ‘ΠΠ!
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
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