ΠΠΎΠ»ΡΡΠ°Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ β ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS buttons HTML
ΠΠΎΠ»ΡΡΠ°Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΏΡΠΎΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS, ΡΠ°Π±ΠΎΡΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ HTML Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°, ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΡΠ΅ ΠΈ ΡΡΡΠ΅ΠΊΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΎΡΠΊΠΈ CSS, ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΡΡΠ»ΠΎΠΊ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°, ΠΏΡΠΎΡΠΈΠ»Ρ, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π»ΠΈ, ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ, ΠΏΡΠΎΡΠΈΡΠ°ΡΡ, ΡΠΊΠ°ΡΠ°ΡΡ, ΠΎΡΠΊΡΡΡΡ, Π½Π°ΠΆΠ°ΡΡ, ΠΊΡΠΏΠΈΡΡ, ΡΠ΅Π½Π° ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΠΈ Π³ΠΎΡΠΎΠ²ΡΡ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΎΠΊ ΡΠΎΠ±ΡΠ°Π½Π½ΡΠ΅ Π² ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π΅ Π±ΠΎΠ»Π΅Π΅ 20 Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΡΡΡ.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Ρ Π±ΠΎΠ»Π΅Π΅ 20 ΠΏΡΠΎΡΡΡΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ CSS, HTML ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ, ΠΏΠΎ-Π½Π°ΠΆΠΈΠΌΠ°ΡΡ ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π½Π°Π³Π»ΡΠ΄Π½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠΈΠΌΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS3.
β1
Click me! Click me! Click me! Click me! Click me!
ΠΡΠ΅Π΄Π»Π°Π³Π°Ρ Π²Π°ΡΠ΅ΠΌΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ Π½Π΅ΠΏΠ»ΠΎΡ
ΡΡ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS.
HTML
<a href="#"> Click me! </a> <a href="#"> Click me! </a> <a href="#"> Click me! </a> <a href="#"> Click me! </a> <a href="#"> Click me! </a>
CSS
ΠΡΠΎΡΡΠ°Ρ HTML ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π΄Π΅Π»Π°Π΅Ρ Π² Π΄Π²Π° ΡΡΡΡΠ°, Π΅Ρ Π»Π΅Π³ΠΊΠΎ ΡΠΌΠΎΠΆΠ΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅Ρ ΠΈ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ.
ΠΡΡΡΠ°Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΡΠΎΡΡΡΡ
ΠΊΠ½ΠΎΠΏΠΎΠΊ HTML/CSS Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° Π·Π΄Π΅ΡΡ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ.
ΠΠ΅Π»Π°Π΅ΡΠ΅ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠ°Π²ΠΈΡΡ, ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π»ΡΡΡΠΈΠΉ Π²ΠΈΠ΄ HTML (ΡΡΡΠ»ΠΎΠΊ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ), ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ CSS Π² ΡΠ°Π±Π»ΠΎΠ½ DLE ΠΈΠ»ΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ HTML? ΠΠ° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ Π΄Π²Π°Π΄ΡΠ°ΡΠΈ Π³ΠΎΡΠΎΠ²ΡΡ
ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Ρ ΡΠ°Π·Π½ΡΠΌΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠ°ΠΌ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ Π² ΡΠ°ΠΉΠ» Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ *.css Π²Π°ΡΠ΅ΠΉ ΠΏΠ»ΠΎΡΠ°Π΄ΠΊΠ΅, ΠΊΠΎΠ΄ ΡΡΡΠ»ΠΊΠΈ HTML ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ Π² Π½ΡΠΆΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΠΈ Π½ΠΎΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π³ΠΎΡΠΎΠ²Π° ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.

ΠΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ Β«ΠΠ΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° Firefox MozillaΒ» ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ Π² ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°Ρ .
ΠΡΠΈΠΌΠ΅ΡΡ.
β2
Download
HTML
<a href='#' >Download</a>
CSS
β3
Green button
HTML
<a href="#">Green button</a>
CSS
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ
HTML
<a href="#">ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ</a>
CSS
β5
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ
HTML
<a href="#">ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ</a>
CSS
β6
Buttons
HTML
<a href="#">Buttons</a>
CSS
β7
βStory Hack
HTML
<a href="#"><span>β</span>Story Hack</a>
CSS
β8
Buttons
HTML
<a href="#">Buttons</a>
CSS
β9
Download
HTML
<a href="#">Download</a>
CSS
β10
ΠΠ»ΠΈΠΊ
HTML
<a href="#">ΠΠ»ΠΈΠΊ</a>
CSS
β11
Download
HTML
<a href="#">Download</a>
CSS
β12
Download
HTML
<a href="#">Download</a>
CSS
β13
Home
HTML
<a href="#">Home</a>
CSS
β14
Download
<a href="#">Download</a>
CSS
β15
Small Button
HTML
<a href="#">Small Button</a>
CSS
β16
Demo
HTML
<a href=""><span>Demo</span></a>
CSS
β17
Π‘ΡΠΎΠΈΠΌΠΎΡΡΡ 100$
HTML
<a href="#"> <span>Π‘ΡΠΎΠΈΠΌΠΎΡΡΡ</span> <span>100$</span> <span><span></span></span> </a>
CSS
ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΡΡΠ΅Π»ΠΊΠΈ.
β18
Download
HTML
<div><a href="#">Download</a></div>
CSS
β20
Download
HTML
<a href="#">Download</a>
CSS
Button!
HTML
<a href="#">Button!</a>
CSS
β22
Download
HTML
<a href="#">Download</a>
CSS
β23
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Demo
HTML
<a href="#">ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Demo</a>
CSS
Π‘ΡΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄ ΡΠ²ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.
:disabled, :enabled β CSS β ΠΠΎΠΊΠ°
- ΠΡΠ°ΡΠΊΠΎ
- ΠΡΠΈΠΌΠ΅Ρ
- ΠΠ°ΠΊ ΠΏΠΈΡΠ΅ΡΡΡ
- ΠΠ°ΠΊ ΠΏΠΎΠ½ΡΡΡ
- ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ
- ΠΠ° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅
- ΠΠ»ΡΠ½Π° ΠΠ°ΡΠΈΡΠΊΠ°Ρ ΡΠΎΠ²Π΅ΡΡΠ΅Ρ
ΠΡΠ°ΡΠΊΠΎ
Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΎ
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ :disabled
ΠΈ :enabled
ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ β Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈ Π½Π΅Π»ΡΠ·Ρ Π½Π°ΠΆΠ°ΡΡ.
ΠΠ΅Π³ΠΊΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ Π»ΡΠ±ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ disabled
: <button>
, <command>
, <fieldset>
, <keygen>
, <optgroup>
, <option>
, <select>
, <textarea>
ΠΈ <input>
.
ΠΡΠΈΠΌΠ΅Ρ
Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΎ
Π§Π°ΡΡΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΡΠΎΡΠΌΡ Π½Π΅Π»ΡΠ·Ρ Π±ΡΠ»ΠΎ Π½Π°ΠΆΠ°ΡΡ, ΠΏΠΎΠΊΠ° Π½Π΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Ρ Π²ΡΠ΅ ΠΏΠΎΠ»Ρ ΡΡΠΎΠΉ ΡΠΎΡΠΌΡ. ΠΡΠΎΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ disabled
. ΠΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π΅Π³ΠΎ Π² HTML, Π½ΡΠΆΠ½ΠΎ Π΅ΡΡ ΠΈ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅ Π°ΠΊΡΠΈΠ²Π½Π°. ΠΠ°ΠΊ ΡΠ°Π· Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΌ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ
:disabled
.
ΠΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠΉ:
button:disabled { opacity: 0.5;}button:disabled { opacity: 0.5; }
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :enabled
, Π½Π°ΠΎΠ±ΠΎΡΠΎΡ, ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ Π΄Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠΎ ΡΠ°ΠΊΡΡ Π΅Π³ΠΎ ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π·Π°ΠΏΠΈΡΠΈ Ρ Π½ΠΈΠΌ ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΠ°Π²Π½ΠΎΡΠ΅Π½Π½Ρ: .input
= .input
.
ΠΠ°ΠΊ ΠΏΠΈΡΠ΅ΡΡΡ
Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΎ
ΠΡΠ±ΠΎΠΌΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠ΅ΠΌΡ Π½Π° ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π΄ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π΄Π²ΠΎΠ΅ΡΠΎΡΠΈΠ΅ ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΠ»ΠΎΠ²: enabled
ΠΈΠ»ΠΈ disabled
.
ΠΠ°ΠΊ ΠΏΠΎΠ½ΡΡΡ
Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΎ
ΠΡΠ°ΡΠ·Π΅Ρ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΡΠ΅ΡΡΡ Π½Π° Π°ΡΡΠΈΠ±ΡΡ disabled
ΠΈ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΅Π³ΠΎ Π½Π°Π»ΠΈΡΠΈΡ ΠΈΠ»ΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΡ, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ enabled
β Π΄ΠΎΡΡΡΠΏΠ΅Π½, ΠΈΠ»ΠΈ disabled
β Π½Π΅Π΄ΠΎΡΡΡΠΏΠ΅Π½.
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ
Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΎ
π‘ ΠΠ°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ Π·Π°Π±ΡΠ» ΠΏΡΠΎ Π½Π΅Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΠΉΡΠ΅ Π΅Π³ΠΎ Π² ΡΡΠΈΠ»ΡΡ , ΡΡΡΡ ΠΏΡΠΈΠ³Π»ΡΡΠ°Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠ²Π΅Ρ ΠΈΠ»ΠΈ Π΄Π΅Π»Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ β ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΎΡΠ½ΠΎ Π·Π½Π°Π», ΡΡΠΎ Ρ ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Π½Π΅Π»ΡΠ·Ρ.
π‘ enabled
ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½Ρ (Π²ΠΊΠ»ΡΡΠ΅Π½Ρ). ΠΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°Π² ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° .input
, Π²Ρ Π·Π°ΠΊΡΡΠ²Π°Π΅ΡΠ΅ ΡΡΠ΅Π½Π°ΡΠΈΠΉ Ρ Π°ΠΊΡΠΈΠ²Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.
ΠΠ° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅
Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΎ
ΠΠ»ΡΠ½Π° ΠΠ°ΡΠΈΡΠΊΠ°Ρ ΡΠΎΠ²Π΅ΡΡΠ΅Ρ
Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΎ
π Β«ΠΡΠΊΠ»ΡΡΠ°ΡΡΒ» Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΎΡΠΌΡ ΡΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ disabled
, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ ΡΡΠ°Π·Ρ ΠΆΠ΅ ΠΎΡΠΊΠ»ΡΡΠ°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΡΠΈΠ»Π΅ΠΉ. Π, ΠΎΡΠΈΠ΅Π½ΡΠΈΡΡΡΡΡ Π½Π° Π½Π΅Π³ΠΎ, Π³ΠΎΡΠ°Π·Π΄ΠΎ ΡΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π½Π΅Π°ΠΊΡΠΈΠ²Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ disabled
.
ΠΠΎΠ΄ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ· ΠΌΠΎΠ΅Π³ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°:
Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ:
.additional-btn { padding: 2rem 3rem; border: 1px solid currentColor; font-family: inherit; font-size: 1.6rem; color: #FF6650; text-decoration: none; background-color: transparent; transition: border 0.3s, color 0.3s; cursor: pointer; user-select: none;}
.additional-btn {
padding: 2rem 3rem;
border: 1px solid currentColor;
font-family: inherit;
font-size: 1.6rem;
color: #FF6650;
text-decoration: none;
background-color: transparent;
transition: border 0.3s, color 0.3s;
cursor: pointer;
user-select: none;
}
Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΈΠ»ΠΈ ΠΊΠ»ΠΈΠΊΠ΅:
.additional-btn:active,.additional-btn:hover { color: #FF5050; transition: none;}
.additional-btn:active,
.additional-btn:hover {
color: #FF5050;
transition: none;
}
Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π½Π΅Π°ΠΊΡΠΈΠ²Π½Π°:
.additional-btn:disabled { cursor: default; color: #A44234;}
.
additional-btn:disabled {
cursor: default;
color: #A44234;
}
ΠΡΠΊΡΡΡΡ Π΄Π΅ΠΌΠΎ Π² Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ΠΡΠ»ΠΈ Π²Ρ Π½Π°ΡΠ»ΠΈ ΠΎΡΠΈΠ±ΠΊΡ, ΠΎΡΠΏΡΠ°Π²ΡΡΠ΅ Π½Π°ΠΌ ΠΏΡΠ»-ΡΠ΅ΠΊΠ²Π΅ΡΡ!
ΠΠΎ Π²ΡΠ΅ΠΌΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΡΠΎΡΠΌΡ ΡΡΠΎ-ΡΠΎ ΠΏΠΎΡΠ»ΠΎ Π½Π΅ ΡΠ°ΠΊ. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΅ΡΡ ΡΠ°Π·?
β
:checked
ctrl + alt + β
β
:in
, :out
ctrl + alt + β
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΡΡ CMS Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ (WordPress, Drupal, Joomla, Magento ΠΈ Ρ. Π΄.), Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΈΠ·ΡΡΠΈΡΡ CSS, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ Π±ΡΠ΅Π½Π΄ΠΈΠ½Π³ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅. ΠΠ½ΠΎΠΏΠΊΠΈ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ
Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ, Π½ΠΎ ΠΎΠ½ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΈΠ΄Π°ΡΡ ΡΠ°ΠΉΡΡ Π·Π°Π²Π΅ΡΡΠ΅Π½Π½ΡΠΉ ΠΈ ΠΈΠ·ΡΡΠΊΠ°Π½Π½ΡΠΉ Π²ΠΈΠ΄, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΠ΅ ΠΈΡ
Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠ²ΠΎΠΈΠΌ Π²Π½Π΅ΡΠ½ΠΈΠΌ Π²ΠΈΠ΄ΠΎΠΌ.
Π’Π΅Π³
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° ΡΠΈΠΏΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ.
ΠΡΡΠΈΠ±ΡΡΡ HTML
Π’Π΅Π³