ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° Python ΠΈ Objective-C Π² Mac OS

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° Python ΠΈ Objective-C ΠΏΠΎΠ΄ Mac OS ΠΈ для iPhone / iPod Touch

Кнопка круглая css: Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

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

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² BS3

Π― Ρ…ΠΎΡ‡Ρƒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² BS3(ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³) с ΠΎΠ΄Π½ΠΈΠΌ Π·Π½Π°Ρ‡ΠΊΠΎΠΌ fontawesome (4.0) Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅.

Π”ΠΎ сих ΠΏΠΎΡ€ Ρƒ мСня Π΅ΡΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

HTML:

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

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ CSS markup, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΡ€ΡƒΠ³ΠΎΠΌ?

css

twitter-bootstrap

twitter-bootstrap-3

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ


alias51 Β  Β 

26 октября 2013 Π² 00:03

9 ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ²




65

Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ — Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ добавлСния класса для добавлСния радиуса Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

HTML:

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

CSS:

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.42;
  border-radius: 15px;
}

Π² случаС, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈΠ»ΠΈ отступы

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


Tarik Β  Β 

26 октября 2013 Π² 00:08



18

(НС тСстировался Π² кросс-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅), Π½ΠΎ это ΠΌΠΎΠΉ ΠΎΡ‚Π²Π΅Ρ‚:

.btn-circle {
  width: 40px;
  height: 40px;
  line-height: 40px; /* adjust line height to align vertically*/
  padding:0;
  border-radius: 50%;
}
  • Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ†Π΅Π½Ρ‚Ρ€ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства line-height
  • Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ становится бСсполСзным ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΡΠ±Ρ€ΠΎΡˆΠ΅Π½ΠΎ
  • Π³Ρ€Π°Π½ΠΈΡ†Π°-радиус, Π½Π΅ зависящий ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


chocopoche Β  Β 

19 мая 2014 в 10:12



16

Boostrap 3 ΠΈΠΌΠ΅Π΅Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ для этого. Π­Ρ‚ΠΎ:

<span>100</span>

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


Citizen Β  Β 

22 июня 2015 в 02:53


  • Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² android с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅?

    Π― Ρ…ΠΎΡ‡Ρƒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² android. Π­Ρ‚ΠΎ xml, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ: <?xml version=1.0 encoding=utf-8?> <shape xmlns:android=http://schemas.android.com/apk/res/android android:shape=oval> <solid android:color=#9F2200/> <stroke android:width=2dp android:color=#fff />…

  • Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠΉΡ‚Π΅ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ iOS Π² Android

    Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ iOS Π² Android. Как Π²Ρ‹, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ½ΠΎΠΏΠΊΠΈ Android ΠΈΠΌΠ΅ΡŽΡ‚ сСрый Ρ„ΠΎΠ½, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ круглая ΠΊΠ½ΠΎΠΏΠΊΠ° iOS ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‡Π΅Ρ‚ΠΊΠΈΠΉ Ρ„ΠΎΠ½. Для этого я Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ стили ΠΈ Ρ‚Π΅ΠΌΡ‹. Однако я Π½Π΅ знаю, ΠΊΠ°ΠΊ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ всС Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ. НС ΠΌΠΎΠ³ Π±Ρ‹ ΠΊΡ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π΄Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ совСт?…



5

Π­Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ°Ρ ссылка с использованиСм ΡˆΡ€ΠΈΡ„Ρ‚Π°-awesome.

http://bootsnipp.com/snippets/featured/circle-button ?

CSS:

    .btn-circle { width: 30px; height: 30px; text-align: center;padding: 6px 0;font-size: 12px;line-height: 1.428571429;border-radius: 15px;}.btn-circle.btn-lg {width: 50px;height: 50px;padding: 10px 16px;font-size: 18px;line-height:1.33;border-radius: 25px;} 

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


zakaiter Β  Β 

08 ΠΌΠ°Ρ€Ρ‚Π° 2015 Π² 21:21



3

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡˆΡ€ΠΈΡ„Ρ‚Π° Awesome ICONS я использовал ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ для создания ΠΊΡ€ΡƒΠ³Π»ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ/изобраТСния с Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ Π²Ρ‹Π±ΠΎΡ€Ρƒ.

<code>

<span></span>

</code>

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


Mir Β  Β 

13 августа 2014 Π² 11:48



2

Π£ мСня Π±Ρ‹Π»Π° Ρ‚Π° ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΈ я ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π» ΠΎΡ‡Π΅Π½ΡŒ простоС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰Π΅Π΅ для всСх ΠΊΠ½ΠΎΠΏΠΎΠΊ (xs, sm, normal ΠΈ lg) Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ :

.btn-circle {
    border-radius: 50%;
    padding: 0.1em;
    width:1.8em;
}

Π Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ btn-xs ΠΈ-sm Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΈΡ… Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ. И это Π½Π΅ покрываСтся этим Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠΌ. Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° вычисляСт Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° основС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


Itchy Β  Β 

14 июня 2015 в 11:54



0

Если Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΈ эти Ρ„Π°ΠΉΠ»Ρ‹ локально, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ классы Π² bootstrap-social.css, просто Π΄ΠΎΠ±Π°Π²ΠΈΠ² border-radius: 50%;

.btn-social-icon.btn-lg{height:45px;width:45px;
   padding-left:0;padding-right:0; border-radius: 50%; }

И Π²ΠΎΡ‚ HTML

<a >
   <i></i>
</a>
<a>
   <i></i>
</a>
<a>
   <i></i>
</a>

Для мСня это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π³Π»Π°Π΄ΠΊΠΎ.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


Ali Adravi Β  Β 

17 июня 2014 в 03:39



0

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ с ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² (Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° Π·Π½Π°Ρ‡ΠΊΠ°ΠΌ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ). Π’ΠΎΡ‚ Π΅Ρ‰Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹: http://fontawesome.io/examples/

 .no-border {
        border: none;
        background-color: white;
        outline: none;
        cursor: pointer;
    }
.color-no-focus {
        color: grey;
    }
  .hover:hover {
        color: blue;
    }
 .white {
        color: white;
    }
<button type="button" (click)="doSomething()" 
class="hover color-no-focus no-border fa-stack fa-lg">
<i></i>
<span>1</span>
</button>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


Manish Jain Β  Β 

04 фСвраля 2017 Π² 01:38



0

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½ΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ Π² Π»ΡŽΠ±ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Π»ΡƒΡ‡ΡˆΠ΅ всСго Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свойство border-radius . Π― ΡΡ‡ΠΈΡ‚Π°ΡŽ, Ρ‡Ρ‚ΠΎ этот класс Π»ΡƒΡ‡ΡˆΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΏΡ€ΠΈ любом Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Если Π²Ρ‹ Π·Π°Π΄Π°Π΄ΠΈΡ‚Π΅ высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ класс «rouding» для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ.

.btn-circle {
  border-radius: 50%;
}
<button>Click Me!</button>
<button>?</button>

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


Isabella Riquetti Β  Β 

15 октября 2019 Π² 17:57


ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ вопросы:

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ с Ρ€Π°ΠΌΠΊΠΎΠΉ

Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ ΠΈ Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ Ρ€Π°ΠΌΠΊΠΎΠΉ. Как я ΠΌΠΎΠ³Ρƒ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ? Π― ΠΏΡ€ΠΈΠ»ΠΎΠΆΠΈΠ» ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΌΠΎΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ iOS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Π΅Π³ΠΎ я Ρ…ΠΎΡ‡Ρƒ.

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Qt Π½Π° ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ

Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² Qt. Π’ конструкторС Π±Ρ‹Π»Π° создана простая Ρ„ΠΎΡ€ΠΌΠ° с ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ QPushButton . Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ это Π² ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ setMask() . Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ setMask()…

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ фиксированного Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² iphone sdk

Π― Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΊΡ€ΡƒΠ³Π»ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² Π²ΠΈΠ΄Π΅ изобраТСния (ΠΊΠ°ΠΊ я Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»). Он ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΄Π²Π° ΡƒΠ³Π»Π° прямыС, Π° rest ΠΈΠΌΠ΅Π΅Ρ‚ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ. Π― ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» с…

ΠšΡ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π·Π½Π°Π΅Ρ‚ ΠΊΠ°ΠΊΡƒΡŽ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π±Π΅ΡΠΏΠ»Π°Ρ‚Π½ΡƒΡŽ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π² Windows-mobile?

ΠšΡ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π·Π½Π°Π΅Ρ‚ ΠΊΠ°ΠΊΡƒΡŽ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π±Π΅ΡΠΏΠ»Π°Ρ‚Π½ΡƒΡŽ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π² Windows-mobile ? Π·Π°Ρ€Π°Π½Π΅Π΅ спасибо

ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ / ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² win32 API с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ visual c++

Π£ мСня Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Window (win32 API) Π² visual c++. Π― Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ MFC. Π― Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ / ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ bitmap. МоС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ скинутый Π²ΠΈΠ΄. ΠœΠΎΠΆΠ΅Ρ‚ Π»ΠΈ ΠΊΡ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ…

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² android с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅?

Π― Ρ…ΠΎΡ‡Ρƒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² android. Π­Ρ‚ΠΎ xml, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ: <?xml version=1.0 encoding=utf-8?> <shape xmlns:android=http://schemas.android.com/apk/res/android…

Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠΉΡ‚Π΅ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ iOS Π² Android

Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ iOS Π² Android. Как Π²Ρ‹, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ½ΠΎΠΏΠΊΠΈ Android ΠΈΠΌΠ΅ΡŽΡ‚ сСрый Ρ„ΠΎΠ½, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ круглая ΠΊΠ½ΠΎΠΏΠΊΠ° iOS ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‡Π΅Ρ‚ΠΊΠΈΠΉ Ρ„ΠΎΠ½. Для этого я Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ стили ΠΈ…

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ?

Π― Ρ…ΠΎΡ‡Ρƒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ. Π­Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΊΡ€ΡƒΠ³. Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ Π΄Π°Π΅Ρ‚ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ. UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];…

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² android

Π£ мСня Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ я Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ сдСлал, Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ я Ρ…ΠΎΡ‡Ρƒ, ΠΊΠΎΠ³Π΄Π° я наТимаю ΠΊΠ½ΠΎΠΏΠΊΡƒ, Π° Π·Π°Ρ‚Π΅ΠΌ мСняю Ρ„ΠΎΠ½, рисуСмый, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° я дСлаю это, круглая…

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½Π° ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ

ИмСя ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² xml, я Ρ…ΠΎΡ‡Ρƒ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π΅ Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° Π½Π΅Π΅. Π― дСлаю это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΊΠΎΠ΄Π°, Π½ΠΎ ΠΎΠ½ снова мСняСтся Π½Π° ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ, Π° Π½Π΅ Π½Π° ΠΈΡΡ…ΠΎΠ΄Π½ΡƒΡŽ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ:…

W3.CSS Кнопки. Π£Ρ€ΠΎΠΊΠΈ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…. W3Schools Π½Π° русском



Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ


Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ


Button
Кнопка
Кнопка
Кнопка
Кнопка
ВСнь
Кнопка


Кнопка1
Кнопка2
Кнопка3


Кнопка
Кнопка


W3.CSS ΠšΠ»Π°ΡΡΡ‹ ΠΊΠ½ΠΎΠΏΠΊΠΈ

W3.CSS прСдоставляСт ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ классы для ΠΊΠ½ΠΎΠΏΠΎΠΊ:








ΠšΠ»Π°ΡΡΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚
w3-btnΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° с эффСктом Ρ‚Π΅Π½ΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
Π¦Π²Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ.
w3-buttonΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° с сСрым эффСктом навСдСния.
Π¦Π²Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ свСтло-сСрый Π² W3.CSS вСрсии 3.
Π¦Π²Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ наслСдуСтся ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта Π² вСрсии 4.
w3-barΠ“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ полоса, которая ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ.
(ИдСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ)
w3-blockКласс, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для опрСдСлСния ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ (100%).
w3-circleΠœΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для опрСдСлСния ΠΊΡ€ΡƒΠ³Π»ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
w3-rippleΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использован для создания эффСкта ряби.

Кнопки

И класс w3-button, ΠΈ класс w3-btn Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊ Π»ΡŽΠ±Ρ‹ΠΌ элСмСнтам HTML.

НаиболСС распространСнныС элСмСнты для использования <input type=»button»>, <button> ΠΈ <a>:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Button Button
Link Button

<input type=»button» value=»Input Button»>

<button>Button Button</button>

<a href=»https://www.w3schools.com»>Link Button</a>

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


Π¦Π²Π΅Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ


Black
Khaki
Yellow
Red
Purple
Aqua
Blue
Indigo
Green
Teal

ВсС классы w3-color ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для добавлСния Ρ†Π²Π΅Ρ‚Π° ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<button>Black</button>

<button>Khaki</button>

<button>Yellow</button>

<button>Red</button>

<button>Purple</button>

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


Π¦Π²Π΅Ρ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ навСдСния Ρ‚Π°ΠΊΠΆΠ΅ Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ². Π’ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅:


White
Red
Purple
Aqua
Blue
Green
Teal

ΠšΠ»Π°ΡΡΡ‹ w3-hover-color ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для добавлСния Ρ†Π²Π΅Ρ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<button>Black</button>

<button>Red</button>

<button>Purple</button>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


Π€ΠΎΡ€ΠΌΡ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ


Normal
Round
Rounder
and Rounder
and Rounder


Normal
Round
Rounder
and Rounder
and Rounder

ΠšΠ»Π°ΡΡΡ‹ w3-round-size ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для добавлСния ΠΎΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… Π³Ρ€Π°Π½ΠΈΡ† ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Round
Rounder
and Rounder
and Rounder

<button>Round</button>

<button>Rounder</button>

<button>and Rounder</button>

<button>and Rounder</button>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ


Tiny
Small
Medium
Large
XLarge

ΠšΠ»Π°ΡΡΡ‹ w3-size ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ для опрСдСлСния Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² тСкста:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<button>Tiny</button>

<button>Small</button>

<button>Medium</button>

<button>Large</button>

<button>xLarge</button>

<button>XXLarge</button>

<button>XXXLarge</button>

<button>Jumbo</button>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


Π“Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ


Кнопка
Кнопка
Кнопка
Кнопка


Кнопка
Кнопка
Кнопка
Кнопка

Класс w3-border ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для добавлСния Π³Ρ€Π°Π½ΠΈΡ† ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ.

ΠšΠ»Π°ΡΡΡ‹ w3-border-color ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для опрСдСлСния Ρ†Π²Π΅Ρ‚Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<button>Button</button>

<button>Button</button>

<button>Button</button>

<button>Button</button>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π‘ΠΎΠ²Π΅Ρ‚: Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ класс w3-round-Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ скруглСнныС Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.


Кнопки с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ тСкстовыми эффСктами

Кнопки ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эффСкт Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΎΠ³ΠΎ тСкста:


ΠžΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ
Π¨ΠΈΡ€ΠΎΠΊΠΈΠΉ

Класс w3-wide добавляСт Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ тСкстовый эффСкт:

Кнопки ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ курсивный ΠΈ ΠΆΠΈΡ€Π½Ρ‹ΠΉ тСкст:


ΠžΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ
ΠšΡƒΡ€ΡΠΈΠ²Π½Ρ‹ΠΉ
Π–ΠΈΡ€Π½Ρ‹ΠΉ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ стандартныС HTML Ρ‚Π΅Π³ΠΈ (<i> ΠΈ <b>), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ курсивный ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΉ эффСкт ΠΊ тСксту ΠΊΠ½ΠΎΠΏΠΊΠΈ:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<button><i>ΠšΡƒΡ€ΡΠΈΠ²Π½Ρ‹ΠΉ</i></button>

<button><b>Π–ΠΈΡ€Π½Ρ‹ΠΉ</b></button>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


Кнопки с отступом (padding)


Кнопка
Кнопка
Кнопка


Кнопка
Кнопка
Кнопка

ΠšΠ»Π°ΡΡΡ‹ w3-padding-Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для добавлСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ отступа Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста ΠΊΠ½ΠΎΠΏΠΊΠΈ:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Кнопка
Кнопка
Кнопка

<button>Кнопка</button>

<button>Кнопка</button>

<button>Кнопка</button>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


Кнопки ΠΏΠΎΠ»Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² Π½Π΅Ρ‘ класс w3-block.

Кнопки ΠΏΠΎΠ»Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 100% ΠΈ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта:

Кнопка

Кнопка

Кнопка

Кнопка

Кнопка

Кнопка

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Кнопка
Кнопка
Кнопка

<button>Кнопка</button>

<button>Кнопка</button>

<button>Кнопка</button>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π‘ΠΎΠ²Π΅Ρ‚: ВыровняйтС тСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ класса w3-left-align ΠΈΠ»ΠΈ w3-right-align.

Π Π°Π·ΠΌΠ΅Ρ€ Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ style=»width:».


Кнопка
Кнопка
Кнопка

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<button
>Button</button>

<button>Button</button>

<button>Button</button>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Кнопки Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ΡΡ эффСктом Ρ‚Π΅Π½ΠΈ, ΠΈ стрСлочка курсора прСвращаСтся Π² Ρ€ΡƒΠΊΡƒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ… курсора.

ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ (ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹) ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ Π·Π½Π°ΠΊ «no parking sign» («ΠΏΠ°Ρ€ΠΊΠΎΠ²ΠΊΠ° Π·Π°ΠΏΡ€Π΅Ρ‰Π΅Π½Π°»):


Кнопка
ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ


Кнопка
ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ

Класс w3-disabled ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΉ (disabled) ΠΊΠ½ΠΎΠΏΠΊΠΈ (Ссли элСмСнт ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ стандартный disabled Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ HTML, вмСсто Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ disabled Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚):

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Кнопка-ссылка
Кнопка

<a href=»https://www.w3schools.com»>Кнопка-ссылка</a>

<button disabled>Кнопка</button>

<input type=»button» value=»Button» disabled>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


Кнопки-ΠΏΠ°Π½Π΅Π»ΠΈ (Π±Π°Ρ€Ρ‹)

Кнопки ΠΌΠΎΠΆΠ½ΠΎ ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ полосС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ класса w3-bar:


Кнопка
Кнопка
Кнопка

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<div>

  <button>Кнопка</button>

  <button>Кнопка</button>

  <button>Кнопка</button>

</div>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Класс w3-bar появился Π² W3.CSS вСрсии 2.93 / 2.94.

Кнопки ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ сгруппированы Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ класса w3-bar-item:


Кнопка
Кнопка
Кнопка

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<div>

  <button>Кнопка</button>

  <button>Кнопка</button>

  <button>Кнопка</button>

</div>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

ПанСли ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ класса w3-center:


Кнопка
Кнопка
Кнопка

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<div>
<div>

  <button>Кнопка</button>

  <button>Кнопка</button>

  <button>Кнопка</button>

</div>
</div>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π΄Π²Π΅ (ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅) ΠΏΠ°Π½Π΅Π»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΠΎΠ΄Π½ΠΎΠΉ строкС, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ класс w3-show-inline-block:


Кнопка
Кнопка
Кнопка


Кнопка
Кнопка
Кнопка

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

  Кнопка
  Кнопка
  Кнопка

<div
>
<div>

  <button>Кнопка</button>
Β  <button
class=»w3-btn w3-teal»>Кнопка</button>
  <button>Кнопка</button>
</div>
</div>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


НавигационныС ΠΏΠ°Π½Π΅Π»ΠΈ (Π½Π°Π²Π±Π°Ρ€Ρ‹)

ПанСли ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² качСствС ΠΏΠ°Π½Π΅Π»Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ:


Кнопка
Кнопка
Кнопка


Кнопка
Кнопка
Кнопка


Кнопка
Кнопка
Кнопка


Кнопка
Кнопка
Кнопка

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<div>
  <button>Кнопка</button>
  <button>Кнопка</button>
  <button>Кнопка</button>
</div>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ style=»width:»:


Кнопка
Кнопка
Кнопка

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<div>
Β  <button
style=»width:33.3%»>Кнопка</button>
  <button>Кнопка</button>
Β  <button
class=»w3-bar-item w3-button w3-red»>Кнопка</button>
</div>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π’Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ большС ΠΎ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ·ΠΆΠ΅ Π² этом ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ΅.


ЛСвая ΠΈ правая ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ класс .w3-left ΠΈ класс .w3-right Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ:


Π‘Π»Π΅Π²Π°
Π‘ΠΏΡ€Π°Π²Π°

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания ΠΊΠ½ΠΎΠΏΠΎΠΊ «previous/next» (ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ/ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ):


Β« Previous
Next Β»

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<div>

Β  <button>Π‘Π»Π΅Π²Π°</button>

Β  <button>Π‘ΠΏΡ€Π°Π²Π°</button>
</div>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


Кнопки с эффСктами ряби

The w3-ripple создаСт эффСкт ряби (Π²ΠΎΠ»Π½Ρ‹) для ΠΊΠ½ΠΎΠΏΠΎΠΊ (ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° Π½ΠΈΡ…):


Кнопка
Кнопка
Кнопка


Кнопка
Кнопка
Кнопка

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<button>Button</button>
<button
class=»w3-button w3-ripple w3-red»>Кнопка</button>
<button>Кнопка</button>


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


ВсС элСмСнты ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй W3.CSS всС элСмСнты ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ:

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ w3-button

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ w3-btn

Π›ΡŽΠ±ΠΎΠΉ div, header, footer ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ w3-button!

Π›ΡŽΠ±ΠΎΠΉ div, header, footer ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ w3-btn!


ΠšΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Класс w3-circle ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания ΠΊΡ€ΡƒΠ³Π»Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ:


+
+

ΠšΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ:


+
+



ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ JavaScript для просмотра ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π², прСдоставлСнных Disqus.


Кнопки-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS3

НовыС свойства CSS (CSS3) Π΄Π°ΡŽΡ‚ нСвСроятныС возмоТности для творчСства ΠΈ ΠΏΠΎΠ»Π΅Ρ‚Π° Ρ„Π°Π½Ρ‚Π°Π·ΠΈΠΈ. МнС особСнно нравится ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ созданиС элСмСнтов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я ΠΏΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS, Π±Π΅Π· Π΅Π΄ΠΈΠ½ΠΎΠΉ строчки JavaScript.

НСсколько Π·Π°ΠΌΠ΅Ρ‡Π°Π½ΠΈΠΉ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π½Π°Ρ‡Π½Π΅ΠΌ:Β 

  • Π― Π½Π΅ Π±ΡƒΠ΄Ρƒ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ прСфиксы Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ CSS-ΠΊΠΎΠ΄Π°, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ ΠΈΡ… Π² исходных Ρ„Π°ΠΉΠ»Π°Ρ….
  • ΠœΡ‹ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ мноТСство ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ состояниями ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ псСвдо-элСмСнты для ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ количСства html-элСмСнтов Π΄ΠΎ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΠ°, Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Firefox ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹/Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ для псСвдо-элСмСнтов.
  • ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ «checkbox hack» (см. Π½ΠΈΠΆΠ΅).

Π›ΠΈΡ‡Π½ΠΎ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ бокс-модСль Π³Π΄Π΅ [width] = [element-width] + [padding] + [borders]. Π― Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Π» Π΅Ρ‘ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΊΠΎΠ΄Π°:

*,
*:after,
*:before {
Β  Β  box-sizing: border-box;
}

О «Checkbox Hack»

Π‘heckbox hack позволяСт Π½Π°ΠΌ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»Ρ Π½Π° чистом CSS. Он основываСтся Π½Π° чСкбоксС (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π»ΠΈΠ±ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½, Π»ΠΈΠ±ΠΎ Π½Π΅ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½), псСвдо-сСлСкторС :checked, ΠΈ родствСнном сСлСкторС (~ ΠΈΠ»ΠΈ +). Если Π²ΠΊΡ€Π°Ρ‚Ρ†Π΅, Ρ‚ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊ: «Π΅ΡΠ»ΠΈ чСкбокс ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½, Ρ‚ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ элСмСнт X Π²Π΅Π΄Π΅Ρ‚ сСбя ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ».

РаньшС для Ρ‚Π°ΠΊΠΈΡ… Ρ†Π΅Π»Π΅ΠΉ использовали чСкбокс с ID ΠΈ Ρ‚Π΅Π³ΠΎΠΌ label, c Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ «for«, ΡΡΡ‹Π»Π°ΡŽΡ‰ΠΈΠΌΡΡ Π½Π° ID чСкбокса. Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ позволял ΡΠΊΡ€Ρ‹Ρ‚ΡŒ чСкбокс ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π΅Π³ΠΎ, Π½Π°ΠΆΠ°Π² Π½Π° label. ЕдинствСнная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с этим ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Safari Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π΅Π³ΠΎ.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ способ: Π΄Π΅Π»Π°Π΅ΠΌ чСкбокс Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ, устанавливаСм Π΅Π³ΠΎ Π²Ρ‹ΡˆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов (z-index:100), Π² нашСм случаС Π²Ρ‹ΡˆΠ΅ label, ΠΈ Π·Π°Ρ‚Π΅ΠΌ ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΊΠ»ΠΈΠΊΠ°Π΅Ρ‚Π΅ Π½Π° Ρ‚Π΅Π³ label, Ρ‚ΠΎ Π½Π° самом Π΄Π΅Π»Π΅ Π²Ρ‹ ΠΎΡ‚ΠΌΠ΅Ρ‡Π°Π΅Ρ‚Π΅ чСкбокс! Код выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

.switch input {
Β  Β  /* Π’Π½Π°Ρ‡Π°Π»Π΅ Π΄Π΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎ Ρ€Π°Π²Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ находится */
Β  Β  position: absolute;
Β  Β  width: 100%;
Β  Β  height: 100%;
Β  Β  /* Π—Π°Ρ‚Π΅ΠΌ, ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅ΠΌ Π΅Π³ΠΎ Π²Π²Π΅Ρ€Ρ…, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов */
Β  Β  z-index: 100;
Β  Β  /* Π”Π΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ */
Β  Β  opacity: 0;
Β  Β  /* А это для эргономичности */
Β  Β  cursor: pointer;
}

Π­Ρ‚ΠΈ 12 строк CSS-ΠΊΠΎΠ΄Π° Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π²ΠΎ всСх ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…, Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ с красивой нСбольшой ΠΊΠ½ΠΎΠΏΠΊΠΈ, с нСбольшим горящим ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Π°.

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°

<div>
Β  Β  <input type=»checkbox»>
Β  Β  <label></label>
</div>

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Β .switch — это наш ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€. Π’Π½ΡƒΡ‚Ρ€ΠΈ этого элСмСнта находится Ρ‚Π΅Π³ input ΠΈ Ρ‚Π΅Π³ label. Для Ρ‚Π΅Π³Π° input достаточно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΈΠΏ checkbox (ID, name Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹).

ПослСдний элСмСнт ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊΠΈΠΌ ΡƒΠ³ΠΎΠ΄Π½ΠΎ (ссылкой, div-ΠΎΠΌ, span-ΠΎΠΌ, label ΠΈ Ρ‚.Π΄.). Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ label ΠΏΠΎ старой ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡ΠΊΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ€Π°Π½ΡŒΡˆΠ΅ использовал старый Ρ…Π°ΠΊ для чСкбоксов, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ Π±Ρ‹Π» Ρ‚Π΅Π³ label.

CSS

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΌΡ‹ Π·Π°Π΄Π°Π΄ΠΈΠΌ нашСй ΠΊΠ½ΠΎΠΏΠΊΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€, установив ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота Ρ€Π°Π²Π½Ρ‹, ΠΈΠ½Π°Ρ‡Π΅ ваша ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΡ€ΡƒΠ³Π»ΠΎΠΉ. ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ прячСм чСкбокс ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS-ΠΊΠΎΠ΄Π°, ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π² Π½Π°Ρ‡Π°Π»Π΅ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ.

.switch {
Β  Β  width: 100px;
Β  Β  height: 100px;
Β  Β  position: relative;
}

Π—Π°Ρ‚Π΅ΠΌ Π·Π°Π΄Π°Π΄ΠΈΠΌ стили для Ρ‚Π΅Π³Π° label. ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго, установим Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ€Π°Π²Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ Π΅Π³ΠΎ родитСля (ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€). Π—Π°Ρ‚Π΅ΠΌ, Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅ΠΌΡƒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ·ΠΆΠ΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ псСвдо-элСмСнты.

.switch label {
Β  Β  display: block;
Β  Β  width: 100%;
Β  Β  height: 100%;
Β  Β  position: relative;
Β  Β  border-radius: 50%;
Β  Β  background: #eaeaea;
Β  Β  box-shadow:
Β  Β  Β  Β  0 3px 5px rgba(0,0,0,0.25),
Β  Β  Β  Β  inset 0 1px 0 rgba(255,255,255,0.3),
Β  Β  Β  Β  inset 0 -5px 5px rgba(100,100,100,0.1),
Β  Β  Β  Β  inset 0 5px 5px rgba(255,255,255,0.3);
}

Π—Π°Ρ‚Π΅ΠΌ, ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ псСвдо-элСмСнта :after Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊΠ½ΠΎΠΏΠΊΠ΅ рСалистичности, нарисуСм ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈ Ρ‚Π΅Π½ΠΈ.

.switch label:after {
Β  Β  content: «»;
Β  Β  position: absolute;
Β  Β  z-index: -1;
Β  Β  top: -8%;
Β  Β  right: -8%;
Β  Β  bottom: -8%;
Β  Β  left: -8%;
Β  Β  border-radius: inherit;
Β  Β  background: #ddd; /* Fallback */
Β  Β  background: linear-gradient(#ccc, #fff);
Β  Β  box-shadow:
Β  Β  Β  Β  inset 0 2px 1px rgba(0,0,0,0.15),
Β  Β  Β  Β  0 2px 5px rgba(200,200,200,0.1);
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ состояния ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ малСнький ΠΊΡ€ΡƒΠ³, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Π½Ρ‹ΠΉ Π² сСрСдинС ΠΊΠ½ΠΎΠΏΠΊΠΈ.

.switch label:before {
Β  Β  content: «»;
Β  Β  position: absolute;
Β  Β  width: 20%;
Β  Β  height: 20%;
Β  Β  left: 40%;
Β  Β  top: 40%;
Β  Β  border-radius: inherit;
Β  Β  background: #969696; /* Fallback */
Β  Β  background: radial-gradient(40% 35%, #ccc, #969696 60%);
Β  Β  box-shadow:
Β  Β  Β  Β  inset 0 2px 4px 1px rgba(0,0,0,0.3),
Β  Β  Β  Β  0 1px 0 rgba(255,255,255,1),
Β  Β  Β  Β  inset 0 1px 0 white;
}

Π˜Ρ‚Π°ΠΊ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас Π΅ΡΡ‚ΡŒ симпатичная ΠΊΠ½ΠΎΠΏΠΊΠ°. Π”Π°Π²Π°ΠΉΡ‚Π΅ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ с ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Π½Ρ‹ΠΌ состояниСм ΠΊΠ½ΠΎΠΏΠΊΠΈ. Когда Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ Π½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, Π²Ρ‹ Π½Π° самом Π΄Π΅Π»Π΅ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ Π½Π° Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΉ чСкбокс, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ находится Π½Π°Π΄ Ρ‚Π΅Π³ΠΎΠΌ label. Если Π²Ρ‹ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ чСкбокс, это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСлСктор :checked ΠΈ родствСнный сСлСктор.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π°, ΠΌΡ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° (псСвдо-элСмСнт :before), Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ„ΠΎΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

.switch input:checked ~ label { /* Button */
Β  Β  background: #e5e5e5; /* Fallback */
Β  Β  background: linear-gradient(#dedede, #fdfdfd);
}
Β 
.switch input:checked ~ label:before { /* LED */
Β  Β  background: #25d025; /* Fallback */
Β  Β  background: radial-gradient(40% 35%, #5aef5a, #25d025 60%);
Β  Β  box-shadow:
Β  Β  Β  Β  inset 0 3px 5px 1px rgba(0,0,0,0.1),
Β  Β  Β  Β  0 1px 0 rgba(255,255,255,0.4),
Β  Β  Β  Β  0 0 10px 2px rgba(0, 210, 0, 0.5);
}

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 2

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ сдСлаСм ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ, ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ Π½Π° Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π΄ΠΎΠΌΠ΅ для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ\Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ свСта.

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° такая ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅: ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, чСкбокс ΠΈ этикСтка:

<div>
Β  Β  <input type=»checkbox»>
Β  Β  <label></label>
</div>

CSS

НачнСм с установки Ρ€Π°Π·ΠΌΠ΅Ρ€Π° нашСй ΠΊΠ½ΠΎΠΏΠΊΠΈ.

.switch {
Β  Β  width: 50px;
Β  Β  height: 100px;
Β  Β  position: relative;
}

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ мноТСство Ρ‚Π΅Π½Π΅ΠΉ для Π±Π»ΠΎΠΊΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ…ΠΎΡ€ΠΎΡˆΠΎ выглядСла. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Ρ‚Π°ΠΊΠΆΠ΅ мягкиС Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° ΠΈ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС это выглядСло Π΅Ρ‰Π΅ мягчС:

.switch label {
Β  Β  display: block;
Β  Β  width: 100%;
Β  Β  height: 100%;
Β  Β  position: relative;
Β  Β  background: #cbc7bc;
Β  Β  border-radius: 5px;
Β  Β  box-shadow:
Β  Β  Β  Β  inset 0 1px 0 white,
Β  Β  Β  Β  0 0 0 1px #999,
Β  Β  Β  Β  0 0 5px 1px rgba(0,0,0,0.2),
Β  Β  Β  Β  0 2px 0 rgba(255,255,255,0.6),
Β  Β  Β  Β  inset 0 10px 1px #e5e5e5,
Β  Β  Β  Β  inset 0 11px 0 rgba(255,255,255,0.5),
Β  Β  Β  Β  inset 0 -45px 3px #ddd;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ псСвдо-элСмСнты. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для создания корпуса, Π²Ρ‚ΠΎΡ€ΠΎΠΉ для ΠΈΠΌΠΈΡ‚Π°Ρ†ΠΈΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ с корпуса:

.switch label:after {
Β  Β  content: «»;
Β  Β  position: absolute;
Β  Β  z-index: -1;
Β  Β  top: -20px;
Β  Β  left: -25px;
Β  Β  bottom: -20px;
Β  Β  right: -25px;
Β  Β  background: #ccc; /* Fallback */
Β  Β  background: linear-gradient(#ddd, #bbb);
Β  Β  border-radius: inherit;
Β  Β  border: 1px solid #bbb;
Β  Β  box-shadow:
Β  Β  Β  Β  0 0 5px 1px rgba(0,0,0,0.15),
Β  Β  Β  Β  0 3px 3px rgba(0,0,0,0.3),
Β  Β  Β  Β  inset 0 1px 0 rgba(255,255,255,0.5);
}

Π’Ρ‚ΠΎΡ€ΠΎΠΉ Π±ΠΎΠ»Π΅Π΅ интСрСсСн, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ элСмСнт для создания Π΄Π²ΡƒΡ… состояний. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ для этого box-shadow!

.switch label:before {
Β  Β  content: «»;
Β  Β  position: absolute;
Β  Β  width: 8px;
Β  Β  height: 8px;
Β  Β  top: -13px;
Β  Β  left: 20px;
Β  Β  background: #666;
Β  Β  border-radius: 50%;
Β  Β  box-shadow:
Β  Β  Β  Β  0 1px 0 white, /* Subtle reflection on the bottom of the hole */
Β  Β  Β  Β  0 120px 0 #666, /* Faking a second screw hole… */
Β  Β  Β  Β  0 121px 0 white; /* And its reflection */
}

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ (которая являСтся Ρ‚Π΅Π³ΠΎΠΌ label) Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Ρ‰Π΅Π»ΠΊΠ½Π΅ΠΌ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅. И ΠΌΡ‹ создали этот эффСкт ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ box-shadow:

.switch input:checked ~ label { /* Button */
Β  Β  background: #d2cbc3;
Β  Β  box-shadow:
Β  Β  Β  Β  inset 0 1px 0 white,
Β  Β  Β  Β  0 0 0 1px #999,
Β  Β  Β  Β  0 0 5px 1px rgba(0,0,0,0.2),
Β  Β  Β  Β  inset 0 -10px 0 #aaa,
Β  Β  Β  Β  0 2px 0 rgba(255,255,255,0.1),
Β  Β  Β  Β  inset 0 45px 3px #e0e0E0,
Β  Β  Β  Β  0 8px 6px rgba(0,0,0,0.18);
}

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 3

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π΅Ρ‰Π΅ ΠΊΡ€ΡƒΡ‡Π΅. Он взят ΠΈΠ· прСкрасного Π΄ΠΈΠ·Π°ΠΉΠ½Π°Β  ΠΎΡ‚ Ρ‚Π°Π»Π°Π½Ρ‚Π»ΠΈΠ²ΠΎΠ³ΠΎ Piotr Kwiatkowski. Π­Ρ‚ΠΎ выглядит ΠΎΡ‡Π΅Π½ΡŒ симпатично, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ?

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°

Для этого ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»Ρ, Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ для этой Ρ†Π΅Π»ΠΈ Ρ‚Π΅Π³ <i>.

<div>
Β  Β  <input type=»checkbox»>
Β  Β  <label><i></i></label>
</div>

CSS

Π˜Ρ‚Π°ΠΊ, Π΅Ρ‰Π΅ Ρ€Π°Π·, ΠΌΡ‹ скрываСм чСкбокс ΠΈ Π·Π°Π΄Π°Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

.switch {
Β  Β  width: 180px;
Β  Β  height: 50px;
Β  Β  position: relative;
}

Π—Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ собираСмся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅: label Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ для ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»Ρ. А Ρ‚Π΅Π³ <i> ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ фактичСски ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»Π΅ΠΌ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Ρ‚Π΅Π³Β label Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ сСрый Ρ„ΠΎΠ½ с тСнями, Π½Π΅ Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ. ПсСвдо-элСмСнты ΡΠ΄Π΅Π»Π°ΡŽΡ‚ всС ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅.

.switch label {
Β  Β  display: block;
Β  Β  width: 100%;
Β  Β  height: 100%;
Β  Β  position: relative;
Β  Β  background: #a5a39d;
Β  Β  border-radius: 40px;
Β  Β  box-shadow:
Β  Β  Β  Β  inset 0 3px 8px 1px rgba(0,0,0,0.2),
Β  Β  Β  Β  0 1px 0 rgba(255,255,255,0.5);
}

Π­Ρ‚ΠΎ «Ρ€Π°ΠΌΠΊΠ° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°», поэтому ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ Π΅ΠΉ приятный Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π΅Π½ΠΈ для Π±Π»ΠΎΠΊΠ°.

.switch label:after {
Β  Β  content: «»;
Β  Β  position: absolute;
Β  Β  z-index: -1;
Β  Β  top: -8px; right: -8px; bottom: -8px; left: -8px;
Β  Β  border-radius: inherit;
Β  Β  background: #ccc; /* Fallback */
Β  Β  background: linear-gradient(#f2f2f2, #ababab);
Β  Β  box-shadow: 0 0 10px rgba(0,0,0,0.3),
Β  Β  Β  Β  0 1px 1px rgba(0,0,0,0.25);
}

Π­Ρ‚ΠΎΡ‚ псСвдо-элСмСнт ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для создания мягкого углублСния Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠ½ΠΎΠΏΠΊΠΈ, для этого ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈ Ρ‚Π΅Π½ΠΈ. НСбольшоС ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ для Chrome с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π° blur, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эффСкт Π΅Ρ‰Π΅ мягчС.

.switch label:before {
Β  Β  content: «»;
Β  Β  position: absolute;
Β  Β  z-index: -1;
Β  Β  top: -18px; right: -18px; bottom: -18px; left: -18px;
Β  Β  border-radius: inherit;
Β  Β  background: #eee; /* Fallback */
Β  Β  background: linear-gradient(#e5e7e6, #eee);
Β  Β  box-shadow: 0 1px 0 rgba(255,255,255,0.5);
Β  Β  -webkit-filter: blur(1px); /* Smooth trick */
Β  Β  filter: blur(1px); /* Future-proof */
}

Π˜Ρ‚Π°ΠΊ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас Π΅ΡΡ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ красивая Ρ€Π°ΠΌΠΊΠ° для Π½Π°ΡˆΠΈΡ… ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»Π΅ΠΉ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ самим ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡΠΌ.

Π‘Π΄Π΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ элСмСнтом, Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅ΠΌΡƒ высоту Π΅Π³ΠΎ родитСля ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ большС Ρ‡Π΅ΠΌ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ родитСля. ΠœΡ‹ помСстим Π΅Π³ΠΎ слСва ΠΎΡ‚ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΈ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅ΠΌΡƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стили (Ρ‚Π΅Π½ΠΈ ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹):

.switch label i {
Β  Β  display: block;
Β  Β  height: 100%;
Β  Β  width: 60%;
Β  Β  position: absolute;
Β  Β  left: 0;
Β  Β  top: 0;
Β  Β  z-index: 2;
Β  Β  border-radius: inherit;
Β  Β  background: #b2ac9e; /* Fallback */
Β  Β  background: linear-gradient(#f7f2f6, #b2ac9e);
Β  Β  box-shadow:
Β  Β  Β  Β  inset 0 1px 0 white,
Β  Β  Β  Β  0 0 8px rgba(0,0,0,0.3),
Β  Β  Β  Β  0 5px 5px rgba(0,0,0,0.2);
}

Π­Ρ‚ΠΎΡ‚ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ псСвдо-элСмСнт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ эстСтики: ΠΎΠ½ добавляСт симпатичный эффСкт ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ.

.switch label i:after {
Β  Β  content: «»;
Β  Β  position: absolute;
Β  Β  left: 15%;
Β  Β  top: 25%;
Β  Β  width: 70%;
Β  Β  height: 50%;
Β  Β  background: #d2cbc3; /* Fallback */
Β  Β  background: linear-gradient(#cbc7bc, #d2cbc3);
Β  Β  border-radius: inherit;
}

Π’Ρ‚ΠΎΡ€Ρ‹ΠΌ псСвдо-элСмСнтом являСтся слово «ON» ΠΈΠ»ΠΈ «OFF», Π² зависимости ΠΎΡ‚ состояния ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ свойство content, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎΠ΅ слово, ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стили для ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° выглядСла, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Ρ‚ΠΎ ΠΎΠ½Π° Π²Ρ‹Π³Ρ€Π°Π²ΠΈΡ€ΠΎΠ²Π°Π½Π° Π½Π° Ρ„ΠΎΠ½Π΅:

.switch label i:before {
Β  Β  content: «off»;
Β  Β  position: absolute;
Β  Β  top: 50%;
Β  Β  right: -50%;
Β  Β  margin-top: -12px;
Β  Β  color: #666; /* Fallback */
Β  Β  color: rgba(0,0,0,0.4);
Β  Β  font-style: normal;
Β  Β  font-weight: bold;
Β  Β  font-family: Helvetica, Arial, sans-serif;
Β  Β  font-size: 24px;
Β  Β  text-transform: uppercase;
Β  Β  text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ‚ΡƒΠΌΠ±Π»Π΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ выглядит Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ нарисовал Piotr, Π²Π΅Ρ€Π½ΠΎ?

Π’Π΅ΠΏΠ΅Ρ€ΡŒ займСмся состояниСм ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° «Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π°». Π’Ρ€ΠΈ Π²Π΅Ρ‰ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Π½Π°ΠΆΠΌΠ΅ΠΌ Π½Π° Ρ„Π»Π°ΠΆΠΎΠΊ: Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, ΠΈ слово («ON» ΠΈΠ»ΠΈ «OFF»):

.switch input:checked ~ label { /* Background */
Β  Β  background: #9abb82;
}
Β 
.switch input:checked ~ label i { /* Toggle */
Β  Β  left: auto;
Β  Β  right: -1%;
}
Β 
.switch input:checked ~ label i:before { /* On/off */
Β  Β  content: «on»;
Β  Β  right: 115%;
Β  Β  color: #82a06a;
Β  Β  text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659;
}

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 4

Наш послСдний ΠΏΡ€ΠΈΠΌΠ΅Ρ€ основан Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Π΅ ΠΎΡ‚ Piotr Kwiatkowski, Π½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ мною, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚Π΅ ΠΆΠ΅ Ρ†Π²Π΅Ρ‚Π°, Ρ‡Ρ‚ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹.

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΡ‡Ρ‚ΠΈ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ Π² Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Класс для Ρ‚Π΅Π³Π° <i> Π½ΡƒΠΆΠ΅Π½ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ FontAwesome.

<div>
Β  Β  <input type=»checkbox»>
Β  Β  <label><i></i></label>
</div>

CSS

Π― Π½Π΅ Π±ΡƒΠ΄Ρƒ ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ здСсь всС возмоТности FontAwesome, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡƒΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ с Π½ΠΈΠΌ. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ

  • Π² вашСм @font-face ΡƒΠΊΠ°Π·Π°Π½ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Π°ΠΌ,
  • ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΡˆΠΈΡ… CSS-Ρ„Π°ΠΉΠ»ΠΎΠ² Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя стили FontAwesome.

Π˜Ρ‚Π°ΠΊ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ с основ: спрячСм чСкбокс ΠΈ установим Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°:

.switch {
Β  Β  width: 150px;
Β  Β  height: 150px;
Β  Β  position: relative;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ позаботимся ΠΎ этикСткС, которая ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ нашСй большой ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ сюда Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стили для ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ всС ΠΎΠ½ΠΈ Π½Π°ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ΡΡ, ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΊ Ρ‚Π΅Π³Ρƒ <i> (Π·Π½Π°Ρ‡ΠΎΠΊ).

.switch label {
Β  Β  display: block;
Β  Β  width: 100%;
Β  Β  height: 100%;
Β  Β  position: relative;
Β  Β  color: #a5a39d;
Β  Β  font-size: 70px;
Β  Β  text-align: center;
Β  Β  line-height: 115px;
Β  Β  text-shadow: 0 2px 1px rgba(0,0,0,0.25);
Β  Β  border-radius: 50%;
Β  Β  background: #b25244; /* Fallback */
Β  Β  background: linear-gradient(#f7f2f6, #b2ac9e);
Β  Β  transition: all 0.3s ease-out;
Β  Β  z-index: -1;
Β  Β  box-shadow:
Β  Β  Β  Β  inset 0 2px 3px rgba(255,255,255,0.13),
Β  Β  Β  Β  0 5px 8px rgba(0,0,0,0.3),
Β  Β  Β  Β  0 10px 10px 4px rgba(0,0,0,0.3);
}

Оба псСвдо-элСмСнта для этикСтки ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для создания симпатичного эффСкта Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠœΡ‹ примСняСм Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ размытия для :before, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ½ΠΊΠΈΠΌ.

.switch label:before {
Β  Β  content: «»;
Β  Β  position: absolute;
Β  Β  left: -10px;
Β  Β  right: -10px;
Β  Β  top: -10px;
Β  Β  bottom: -10px;
Β  Β  z-index: -1;
Β  Β  border-radius: inherit;
Β  Β  box-shadow: inset 0 10px 10px rgba(0,0,0,0.13);
Β  Β  -webkit-filter:blur(1px); /* Smooth trick */
Β  Β  filter: blur(1px); /* Future-proof */
}
Β 
.switch label:after {
Β  Β  content: «»;
Β  Β  position: absolute;
Β  Β  left: -20px;
Β  Β  right: -20px;
Β  Β  top: -20px;
Β  Β  bottom: -20px;
Β  Β  z-index: -2;
Β  Β  border-radius: inherit;
Β  Β  box-shadow:
Β  Β  Β  Β  inset 0 1px 0 rgba(255,255,255,0.1),
Β  Β  Β  Β  0 1px 2px rgba(0,0,0,0.3),
Β  Β  Β  Β  0 0 10px rgba(0,0,0,0.15);
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ разбСрСмся с нашими Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ элСмСнтом: <i>. FontAwesome ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ :before псСвдо-элСмСнт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ, поэтому ΠΌΡ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Но ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ :after, ΠΈ ΠΌΡ‹ Ρ‚Π°ΠΊ ΠΈ поступим, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ нашСй ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Как ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, ΠΌΡ‹ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅ΠΉ симпатичный Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, Ρ‚ΠΎΠ½ΠΊΠΈΠ΅ Ρ‚Π΅Π½ΠΈ с 1px размытия, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π΅ Π±ΠΎΠ»Π΅Π΅ Π³Π»Π°Π΄ΠΊΠΎΠΉ.

.switch .icon-off:after {
Β  Β  content: «»;
Β  Β  display: block;
Β  Β  position: absolute;
Β  Β  width: 70%;
Β  Β  height: 70%;
Β  Β  left: 50%;
Β  Β  top: 50%;
Β  Β  z-index: -1;
Β  Β  margin: -35% 0 0 -35%;
Β  Β  border-radius: 50%;
Β  Β  background: #d2cbc3; /* Fallback */
Β  Β  background: linear-gradient(#cbc7bc, #d2cbc3);
Β  Β  box-shadow:
Β  Β  Β  Β  0 -2px 5px rgba(255,255,255,0.05),
Β  Β  Β  Β  0 2px 5px rgba(255,255,255,0.1);
Β  Β  -webkit-filter:blur(1px); /* Smooth trick */
Β  Β  filter: blur(1px); /* Future-proof */
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ стили для ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Π½ΠΎΠ³ΠΎ состояния: Π·Π½Π°Ρ‡ΠΎΠΊ становится Π·Π΅Π»Π΅Π½Ρ‹ΠΌ, Π° ΠΊΠ½ΠΎΠΏΠΊΠ° выглядит Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ:

.switch input:checked ~ label { /* Button */
Β  Β  color: #9abb82;
Β  Β  box-shadow:
Β  Β  Β  Β  inset 0 2px 3px rgba(255,255,255,0.13),
Β  Β  Β  Β  0 5px 8px rgba(0,0,0,0.35),
Β  Β  Β  Β  0 3px 10px 4px rgba(0,0,0,0.2);
}

Бпасибо Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, надСюсь Π²Π°ΠΌ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ

ДСмонстрация

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ исходныС Ρ„Π°ΠΉΠ»Ρ‹

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ с http://tympanus.net

Если Ρƒ Вас Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ вопросы, Ρ‚ΠΎ для ΡΠΊΠΎΡ€Π΅ΠΉΡˆΠ΅Π³ΠΎ получСния ΠΎΡ‚Π²Π΅Ρ‚Π° Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ нашим Ρ„ΠΎΡ€ΡƒΠΌΠΎΠΌ

Π‘Ρ‚ΠΈΠ»ΠΈ CSS ΠΊΠ½ΠΎΠΏΠΎΠΊ, CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ

ЗдравствуйтС, Π² этой ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ прСдставлСны Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Π΅ Π½Π° CSS ΠΈ HTML, Π±Π΅Π· использования ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈ Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ°. Если ΠΏΠΎΡ„Π°Π½Ρ‚Π°Π·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ этим ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ. Π― Ρ€Π΅ΡˆΠΈΠ» ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ ΠΈΡ…, ΠΏΠΎΡ‚ΠΎΠΌΡƒ β€” Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ самому ΠΎΠ½ΠΈ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΈΡΡŒ. Бмотрятся, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ эти CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ довольно β€” Ρ‚Π°ΠΊΠΈ эффСктивно ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.
ο»Ώ

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€

ΠšΡΡ‚Π°Ρ‚ΠΈ, стили CSS ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π΅ Ρ‚Π°ΠΊΠΈΠ΅ ΡƒΠΆ ΠΈ Π΄Π»ΠΈΠ½Π½Ρ‹Π΅, ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π±Ρ‹Π²Π°ΡŽΡ‚. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΌΡƒ ΠΏΡ€ΠΈΠ³Π»ΡΠ½ΡƒΠ»ΠΈΡΡŒ эти ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΠΈ, Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρƒ сСбя Π½Π° сайтС. Π’ исходникС ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ совмСщСны, я Ρ€Π°Π·Π΄Π΅Π»ΠΈΠ» стили ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ для удобства ΠΈ Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Ρƒ мСня Π² ΠΈΡ‚ΠΎΠ³Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ :

HTML ΠΊΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΎΠΊ

Биняя кнопка :

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

ΠšΡ€Π°ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° :

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

ЗСлСная ΠΊΠ½ΠΎΠΏΠΊΠ° :

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

ЖСлтая ΠΊΠ½ΠΎΠΏΠΊΠ° :

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

Π‘Ρ‚ΠΈΠ»ΠΈ CSS ΠΊΠ½ΠΎΠΏΠΎΠΊ

Биняя кнопка :

.btn-blue {
background: #108FE8;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 -2px 0 3px #0d72b8 inset, 0 5px 5px rgba(3, 25, 41, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
cursor: pointer;
display: inline-block;
height: 75px;
width: 75px;
}
.btn-blue:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}

ΠšΡ€Π°ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° :

.btn-red {
background: #E53030;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 -2px 0 3px #c91919 inset, 0 5px 5px rgba(65, 8, 8, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
cursor: pointer;
display: inline-block;
height: 75px;
width: 75px;
}
.btn-red:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}

ЗСлСная ΠΊΠ½ΠΎΠΏΠΊΠ° :

.btn-green {
background: #0EC518;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 -2px 0 3px #0b9512 inset, 0 5px 5px rgba(0, 7, 1, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
cursor: pointer;
display: inline-block;
height: 75px;
width: 75px;
}
.btn-green:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}

ЖСлтая ΠΊΠ½ΠΎΠΏΠΊΠ° :

.btn-yellow {
background: #FFC334;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 -2px 0 3px #ffb401 inset, 0 5px 5px rgba(103, 73, 0, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
cursor: pointer;
display: inline-block;
height: 75px;
width: 75px;
}
.btn-yellow:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}

β€” Для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π½Π΅ Π·Π½Π°Π΅Ρ‚ ΠΊΠ°ΠΊ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ эти ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS, нСбольшой инструктаТ:

ΠšΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹Π΅ стили CSS ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ добавляйтС ΠΈΡ… Π² самоС ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠ΅ Ρ„Π°ΠΉΠ»Π° style.css своСй Ρ‚Π΅ΠΌΡ‹. И ΠΏΠΎΡ‚ΠΎΠΌ, ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ записи останСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ HTML ΠΊΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ, СстСствСнно вставив свою ссылку вмСсто Π·Π½Π°ΠΊΠ° #, Π² любоС мСсто Π±ΡƒΠ΄ΡƒΡŽΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ.


Π›ΡƒΡ‡ΡˆΠΈΠΉ способ ΠΎΡ‚Π±Π»Π°Π³ΠΎΠ΄Π°Ρ€ΠΈΡ‚ΡŒ Π°Π²Ρ‚ΠΎΡ€Π°

ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ ΠΏΠΎ Π’Π΅Π³Π°ΠΌ ΡΡ‚Π°Ρ‚ΡŒΠΈ


Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€Π°ΡΠΈΠ²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ для сайта? ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° HTML+CSS.

Π’ этом постС я ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΠ» для вас ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΡƒ ΠΈΠ· 100 красивых Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° сайт. Π•ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, Π΅ΡΡ‚ΡŒ ссылки Π³Π΄Π΅ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ. Π’Π°ΠΊΠΆΠ΅ я Π² ΠΊΠΎΠ½Ρ†Π΅ записи рассказал, ΠΊΠ°ΠΊ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡ΡƒΠΆΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈΠ»ΠΈ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свою.

ΠŸΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ Π½Π° Π·Π΄ΠΎΡ€ΠΎΠ²ΡŒΠ΅.

ДобавляйтС Π² Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ.

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ HTML+CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ для сайта

CSS3 Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΈΠΊΠΎΠ½ΠΊΠΈ

Π”Π΅ΠΌΠΎ
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

«БизнСс ПРО» ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ элСмСнты Π½Π° CSS3

Π”Π΅ΠΌΠΎ
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Π‘ΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π”Π΅ΠΌΠΎ
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ 3Π” ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΌΠ΅Ρ‚ΠΊΠΈ

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

HTML CSS Кнопки

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

БвСтящиСся ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Облако Ρ‚Π΅Π³ΠΎΠ² с CSS-подсвСткой

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

ΠšΡ€ΡƒΠ³Π»Ρ‹Π΅ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

CSS β€” ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй

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

ΠœΠΈΠ»Ρ‹Π΅ CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Кнопки с CSS-Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

3Π” ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΌΠ΅Π΄ΠΈΠ°

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

ΠžΡ„ΠΈΠ³Π΅Π½Π½Ρ‹Π΅ CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π“ΠΈΡ‚Ρ…Π°Π±Β»

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ
ДокумСнтация

Кнопки Π½Π° CSS3 с псСвдо-элСмСнтами

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ
ДокумСнтация

3Π” Π²Π΅Π±-ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ
ДокумСнтация

АнимированныС ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ
ДокумСнтация

Π Π°Π΄ΠΈΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠΈ с Ρ‚Π΅Π½ΡŒΡŽ

Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½Π°Ρ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ° ΠΏΡ€ΠΈΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ Π² стилС Β«flatΒ» Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ со стрСлами

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½Ρ‹Π΅ Π² Π²ΠΈΠ΄Π΅ списка

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Мокап ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса с ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

АнимированныС ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½Ρ‹Π΅ ΠΈΠ΄Π΅ΠΈ с Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ стилистикой ΠΊΠ½ΠΎΠΏΠΎΠΊ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки Π² стилС «Ѐлэт»

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Flat-ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π‘ΠΎΠ»ΡŒΡˆΠ΅ flat-ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° HTML+CSS для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки с интСрСсным hover-эффСктом

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки Β«ΠΊΠ°ΠΊ Ρƒ Π“ΡƒΠ³Π»Π°Β»

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π Π°ΡΠΊΡ€Π°ΡˆΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² ΠΊΠΎΡ€Π·ΠΈΠ½ΡƒΒ»

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

CSS3 кнопки с иконками

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠœΠ΅Ρ‚Π°Π»Π»ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ для интСрфСйса

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π‘Ρ‚ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

АнимированныС Π»Π°ΠΉΠΊ-ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

АнимированныС ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π Π°Π΄ΠΈΠΎ-Π±Π°Ρ‚Ρ‚ΠΎΠ½Ρ‹

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки для Π²Ρ‹Π±ΠΎΡ€Π° ΠΈ чСклиста

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² стилС «флэт»

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° HTML

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° CSS для сайта

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π“ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° сайт

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй для сайта

Π”Π΅ΠΌΠΎ
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π“ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки Π² стилС Β«Π“Π΅Ρ€ΠΎΠΈ 2Β»

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Toggle-ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Анимированная ΠΊΠ½ΠΎΠΏΠΊΠ° Β«Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΒ» для сайта

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопка-компас

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Набор простых ΠΈ красивых ΠΊΠ½ΠΎΠΏΠΎΠΊ для сайта

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопка-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки Π² стилС Π‘Ρ‚Π°Ρ€-Ρ‚Ρ€Π΅ΠΊΠ°

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

CSS3 «Hexagon» Кнопки

Π”Π΅ΠΌΠΎ
ДокумСнтания

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ для сайта Π½Π° CSS+HTML с эффСктами ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ?

Π¦Π²Π΅Ρ‚Π½Ρ‹Π΅ CSS-ΠΊΠ½ΠΎΠΏΠΊΠΈ для сайта

Набор ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ‚ΠΈΠΏΠΎΠ² CSS ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² Ρ€Π°Π·Π½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚Π°Ρ….

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ для ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΡ сайта.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ Π² стилС Бутрстрапа

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Набор свСтлых ΠΊΠ½ΠΎΠΏΠΎΠΊ

НСсколько простых ΠΈ минималистичных ΠΊΠ½ΠΎΠΏΠΎΠΊ для вашСго интСрфСйса

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

SCSS ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΈΠΊΠΎΠ½ΠΊΠΈ FontAwesome

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки Балливана

ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ ΠΈ чистыС ΠΊΠ½ΠΎΠΏΠΊΠΈ сдСланныС Π½Π° CSS, Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ· FontAwesome.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

8-Π±ΠΈΡ‚Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

ΠžΡ†Π΅Π½ΠΈΡ‚Π΅ эти прСкрасныС Π²ΠΎΡΡŒΠΌΠΈΠ±ΠΈΡ‚Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

3Π” ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

БтСклянныС ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π’ Π½Π°Π±ΠΎΡ€Π΅ стСклянных ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ CSS-настройки для придания 3Π”-Π²ΠΈΠ΄Π°.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

CSS3 Β«Π’ΠΊΠ».Β»/Β«Π’Ρ‹ΠΊΠ».Β» ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ

ΠŸΡ€ΠΈΠΊΠΎΠ»ΡŒΠ½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Π΅ Π½Π° HTML ΠΈ CSS3. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ jQuery.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Анимированная полоса Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопка с Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ

Π­Ρ‚ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ выглядят ΠΊΠ°ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ ΠΈΠ· ΠΊΠ°Ρ€ΠΌΠ°ΡˆΠΊΠΎΠ². Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ для сайта

ЧистыС мягкиС ΠΊΠ½ΠΎΠΏΠΊΠΈ.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки

ΠšΡ€ΡƒΠ³ΠΎΠ²Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΎΠΊΠ°Π½Ρ‚ΠΎΠ²ΠΊΠΎΠΉ окруТности, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ†ΠΈΡŽ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΡ€ΠΎΡˆΠΈΡ‚Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ для сайта ΠΎ Ρ€ΡƒΠΊΠΎΠ΄Π΅Π»ΠΈΠΈ

Кнопки выглядят прострочСнными ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ возмоТности CSS.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки для мСню администратора Π½Π° сайтС

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопка-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ (слайдСр) для сайта

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопка Π² Π²ΠΈΠ΄Π΅ ΠΏΠΎΠΊΠ΅Ρ€Π½ΠΎΠΉ Ρ„ΠΈΡˆΠΊΠΈ

ΠœΠΎΠΆΠ΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ эффСктами ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ для сайта

Набор простых ΠΊΠ½ΠΎΠΏΠΎΠΊ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ сСбя ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ с Font-Awesome.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π‘ΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ для сайта

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°

Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ массивная свСтящаяся ΠΊΠ½ΠΎΠΏΠΊΠ° с эффСктом Ρ‚Π΅Π½ΠΈ.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π’ΠΎΡΡ…ΠΈΡ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ для сайта Π½Π° Css3

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΈ 3Π΄-Ρ‚Π΅Π½ΡŒ.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

3Π” ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΒ» для сайта

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ ΠΈ красивыС ΠΏΡƒΡˆ-ΠΊΠ½ΠΎΠΏΠΊΠΈ для сайта

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π‘ΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ для сайта

Π’ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ простыС настройки CSS β€” Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹, Ρ‚Π΅Π½ΠΈ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π“ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ скруглСнныС ΠΊΠ½ΠΎΠΏΠΊΠΈ

Другая коллСкция красивых Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° сайт.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Кнопки для сайта с «мСталличСским» интСрфСйсом

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

3Π” Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ «мягкиС» ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° сайт

Π’ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ символы юникода, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ»ΠΈ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π“ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ красивыС ΠΊΠ½ΠΎΠΏΠΊΠΈ

ΠšΡ€ΡƒΠ³Π»Ρ‹Π΅, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ свСтящиСся ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° сайт.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

РоТдСствСнскиС ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° сайт

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π² ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтях»

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΡ€Π΅ΠΊΡ€Π°ΡΠ½Ρ‹Π΅ плоскиС ΠΊΠ½ΠΎΠΏΠΊΠΈ

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ красивых плоских ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° Π»ΡŽΠ±Ρ‹Π΅ случаи. НСт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ ΠΈ эффСктов.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π’Π΅ΠΌΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΊΡ€ΡƒΠΆΠΊΠΈ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ jQuery, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ красивый эффСкт ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π‘Ρ€Π΅Π½Π΄ΠΎΠ²Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° сайт

Π‘Π΅Π· эффСктов ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, просто HTML&CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±Ρ€Π΅Π½Π΄ΠΎΠ² Π½Π° ваш сайт.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

3Π”-ΠΊΠ½ΠΎΠΏΠΊΠΈ с эффСктом ΠΏΠ΅Ρ€Π΅Π²ΠΎΡ€ΠΎΡ‚Π°

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS3.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

CSS3-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

3D CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ

ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎ! Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΡƒΠΌΠ΅Π΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ с подсвСткой Π½Π° чистом CSS, Π±Π΅Π· использования Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ°.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΊΡ€ΡƒΡ‚Ρ‹ΠΌΠΈ эффСктами

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

CSS3 Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

CSS3 toggle-ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ минималистичныС ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° сайт

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π“ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

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

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π‘ΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ с 3D-эффСктом

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ красивых 3D-ΠΊΠ½ΠΎΠΏΠΎΠΊ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠšΡ€Π°ΡΠΈΠ²Π°Ρ розовая ΠΊΠ½ΠΎΠΏΠΊΠ° с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ эффСктом

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Как самому ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ для сайта?

ИдСм Π½Π° Sanwebe CSS3 button generator. Π§Ρ‚ΠΎ Ρ‚Π°ΠΌ? Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠΉ:

Π’ΠΈΠ΄ΠΈΠΌ Ρ‚Π°ΠΌ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ настроСк ΠΈ ΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ. Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ Ρƒ мСня.

Π“ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ Ρ‚ΡƒΡ‚ Π½Π΅Ρ‡Π΅Π³ΠΎ, это явно ΡˆΠ΅Π΄Π΅Π²Ρ€. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈ Π²Ρ‹.

Как самому ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ для сайта (ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ)?

ВсСгда ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ·Π°ΠΈΠΌΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡ΡƒΠΆΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ. Π‘Ρ‚ΠΎ Ρ€Π°Π· Ρ‚Π°ΠΊ Π΄Π΅Π»Π°Π». НапримСр, Π½ΠΈ ΠΎΠ΄Π½Π° HTML-ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠ· списка Π²Ρ‹ΡˆΠ΅ Π²Π°ΠΌ Π½Π΅ нравится ΠΈ Π²Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅ Β«ΠΏΠΎΠΉΠ΄Ρƒ снова Π³ΡƒΠ³Π»ΠΈΡ‚ΡŒ Π² ЯндСксС».

Π˜Π΄Π΅Ρ‚Π΅ Π²Ρ‹ Π½Π° сайт ЯндСкса, Π³Π΄Π΅ поисковик ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ yandex.ru Π³Π»Π°Π²Π½ΠΎΠΉ страницСй. Π’ΠΎΡ‚ Ρ‚Π°ΠΊ:

Вас осСняСт β€” эта боТСствСнная ТСлтая ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ€ΠΎΠ²Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ. Π’ΠΎΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ надпись Π½Π΅ Ρ‚Π°. На ΠΊΠ½ΠΎΠΏΠΊΠ΅ написано Β«Π”Π°Β», Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ β€” Β«Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΒ». НС ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ инспСктор Π₯Ρ€ΠΎΠΌΠ° (Π€12) β€” мСняСм Π² ΠΊΠΎΠ΄Π΅ Β«Π”Π°Β» Π½Π° Β«Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΒ».

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎ! Π’ΠΎ Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠ΄Π΅ΠΌ Π² Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏ (ΠΈΠ»ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ), выдСляСм ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈ ΠΎΠ±Ρ€Π΅Π·Π°Π΅ΠΌ Π΅Π΅ ΠΏΠΎ ΠΊΡ€Π°ΡŽ. Π’ ΠΌΠΎΠ΅ΠΉ вСрсии Π½Π° английском языкС это дСйствиС называСтся Β«ΠšΡ€ΠΎΠΏΒ»:

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

ΠžΡ‚Π»ΠΈΡ‡Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ, ΠΊΠ°ΠΊ ΠΏΠΎ ΠΌΠ½Π΅! И внСшний Π²ΠΈΠ΄ интСрСсный.

Ну Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Π° Ρ‡Ρ‚ΠΎ Π½Π° счСт HTML-CSS вСрсии этой ΠΊΠ½ΠΎΠΏΠΊΠΈ? Π—Π΄Π΅ΡΡŒ Ρ‚ΠΎΠΆΠ΅ Π½ΠΈΡ‡Π΅Π³ΠΎ слоТного. Достаточно всСго Π»ΠΈΡˆΡŒβ€¦ Π‘ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ CSS-ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΈΠ· инспСктора Π₯Ρ€ΠΎΠΌΠ°. Кнопка Π½ΠΈΠΆΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π° ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS:

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сСбС ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½Π° сайт. Ну Π° ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² html ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ я ΡƒΠΆΠ΅ рассказывал. Бпасибо Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.

Material Design Lite. Button

Рассмотрим использованиС ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² MDL.

Кнопки Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ Π½Π° основС стандартного html-элСмСнта button. ΠœΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ тСкст ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Доступны нСсколько Π²ΠΈΠ΄ΠΎΠ² ΠΊΠ½ΠΎΠΏΠΊΠΈ: плоская (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ), ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°ΡŽΡ‰Π°Ρ, FAB Π΄Π²ΡƒΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°-Π·Π½Π°Ρ‡ΠΎΠΊ. ВсС ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ простыми (свСтло-сСрыС) ΠΈ Ρ†Π²Π΅Ρ‚Π½Ρ‹ΠΌΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π±Ρ‹Ρ‚ΡŒ Π² нСдоступном состоянии.

ΠšΠ»Π°ΡΡΡ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ.

  • mdl-button — ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ класс для ΠΊΠ½ΠΎΠΏΠΊΠΈ
  • mdl-js-button — ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ класс для ΠΊΠ½ΠΎΠΏΠΊΠΈ
  • mdl-button—raised — Π²Ρ‹ΠΏΡƒΠΊΠ»Ρ‹ΠΉ эффСкт. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для fab, mini-fab, icon
  • mdl-button—fab — ΠšΡ€ΡƒΠ³Π»Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° FAB. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для fab, mini-fab, icon
  • mdl-button—mini-fab — МалСнькая круглая FAB. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для fab, mini-fab, icon
  • mdl-button—icon — ΠšΡ€ΡƒΠ³Π»Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°-Π·Π½Π°Ρ‡ΠΎΠΊ.
  • mdl-button—colored — ЦвСтная ΠΊΠ½ΠΎΠΏΠΊΠ° (primary ΠΈΠ»ΠΈ accent color, Π² зависимости ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ). Π¦Π²Π΅Ρ‚Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Π² material.min.css
  • mdl-button—primary — Π¦Π²Π΅Ρ‚ primary. Π¦Π²Π΅Ρ‚Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Π² material.min.css
  • mdl-button—accent — Π¦Π²Π΅Ρ‚ accent. Π¦Π²Π΅Ρ‚Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Π² material.min.css
  • mdl-js-ripple-effect — эффСкт ripple. МоТно ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ классами

ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ ΠΊ элСмСнту button ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько классов.


<button>Кнопка стандартная</button>

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

FAB-ΠΊΠ½ΠΎΠΏΠΊΠ° с эффСктом ripple (простая ΠΈ цвСтная)

add
add

Мини-FAB

add

add

Выпуклая ΠΊΠ½ΠΎΠΏΠΊΠ°

add

add

Π¦Π²Π΅Ρ‚Π½Ρ‹Π΅ Π²Ρ‹ΠΏΡƒΠΊΠ»Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ (стандарт ΠΈ Π°ΠΊΡ†Π΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ)

add

add

ПлоскиС ΠΊΠ½ΠΎΠΏΠΊΠΈ (Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚, ripple, disabled

add

add

add

А Ρ‚Π°ΠΊΠΆΠ΅ со Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ Prmary ΠΈ Accent

add

add

Кнопка-Π·Π½Π°Ρ‡ΠΎΠΊ (круглая) — обычная ΠΈ цвСтная

add

add

Π’Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ Π½Π° ΠΎΠ±Ρ‰ΡƒΡŽ страницу Material Design Lite

Π Π΅ΠΊΠ»Π°ΠΌΠ°

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ для сайтов | HTML ΠΈ CSS

Π‘Π΅Ρ€Π³Π΅ΠΉ Минкин
Π²Β Ρ€ΡƒΠ±Ρ€ΠΈΠΊΡƒ HTML ΠΈ CSS

16 июля 2008

15

3.4 ΠΈΠ· 5

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ для сайтов

ΠŸΡ€ΠΈ создании Π΄ΠΈΠ·Π°ΠΉΠ½Π° постоянно ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Π΅ΡˆΡŒΡΡ с Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒΡŽ создания стилизованных ΠΏΠΎΠ΄ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠ½ΠΎΠΏΠΎΠΊ для сайта, Π° Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ постоянно ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π΅ ΡƒΠ΄ΠΎΠ±Π½ΠΎ, Π΄Π° ΠΈ Π½Π΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½ΠΎ.

Π—Π΄Π΅ΡΡŒ прСдставлСны 9 ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… статСй Π½Π° Ρ‚Π΅ΠΌΡƒ создания ΠΊΠ½ΠΎΠΏΠΎΠΊ с измСняСмой ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΡ€ΡƒΠ³Π»Ρ‹Ρ… ссылок-ΠΊΠ½ΠΎΠΏΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

ΠœΠΈΠ½ΡƒΡ этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Π² Π½Π°Π»ΠΈΡ‡ΠΈΠΈ большого количСства span-ΠΎΠ² ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ Π΄Π²ΡƒΡ… графичСских Ρ„Π°ΠΉΠ»ΠΎΠ² для создания Ρ„ΠΎΠ½Π°. К плюсам ΠΌΠΎΠΆΠ½ΠΎ отнСсти ΠΏΠΎΡΠ²Π»ΡΡŽΡ‰ΡƒΡŽΡΡ Ρ€Π°ΠΌΠΎΡ‡ΠΊΡƒ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΊΠΎΠΉ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ измСнСния высоты ΠΊΠ½ΠΎΠΏΠΊΠΈ.

Π’Π»Π°Π΄ΠΈΠΌΠΈΡ€ Π’ΠΎΠΊΠΌΠ°ΠΊΠΎΠ²: Π Π°ΠΌΠΊΠΈ, Ρ‚Π΅Π½ΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠΈ, плашки

К минусам ΠΏΠΎΠΆΠ°Π»ΡƒΠΉ относится достаточно слоТная рСлизация Π΄Π°Π½Π½ΠΎΠ³ΠΎ способа. К плюсам ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ здСсь ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ PNG с ΡƒΠΆΠ΅ исправлСным Π±Π°Π³ΠΎΠΌ Π² IE. Π‘Ρ‚Π°Ρ‚ΡŒΡ Π½Π° русском.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ с измСняСмыми Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ

ΠœΠΈΠ½ΡƒΡ: Ρ‚Π΅Π³ button Π½Π΅ всСгда ΡƒΠ΄ΠΎΠ±Π΅Π½ для использования. Плюс: эффСкт наТатия.

ΠšΡ€ΡƒΠ³Π»Ρ‹Π΅ ΡƒΠ³ΠΎΠ»ΠΊΠΈ, интСрСсныС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹

ΠœΠΈΠ½ΡƒΡ: слишком большоС количСство Ρ‚Π΅Π³ΠΎΠ² i ΠΏΡ€ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ. Плюс: Плюс: всСго ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ» для создания оформлСния, Π½Π΅ зависит ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΡˆΡ€ΠΈΡ„Ρ‚Π°, быстроС созданиС Π½ΠΎΠ²ΠΎΠ³ΠΎ скина, Π½Π΅ зависит ΠΎΡ‚ Ρ„ΠΎΠ½Π° Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΠ»Π΅ΠΆΠΈΡ‚, ΠΏΡ€ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°Ρ… бСлая ссылка Π±ΡƒΠ΄Π΅Ρ‚ Π½Π° Π½ΡƒΠΆΠ½ΠΎΠΌ Ρ„ΠΎΠ½Π΅ (Π²Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΎΡ€Π°Π½ΠΆΠ΅Π²ΠΎΠΌ). Π‘Ρ‚Π°Ρ‚ΡŒΡ Π½Π° русском.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ кнопок сайта с простым CSS ΠΈ HTML

ΠœΠΈΠ½ΡƒΡ: простота оформлСния. ΠŸΠ»ΡŽΡΡ‹: Π½Π΅ зависит ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°, всСго ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ» для создания ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π΅Π΅ оформлСния ΠΈ ΠΎΡ‡Π΅Π½ΡŒ простая рСализация.

CSS ΠΎΠ²Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ сайта

ΠœΠΈΠ½ΡƒΡ: Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ div`Π° ΠΏΡ€ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ, Π΄Π²Π° Ρ„Π°ΠΉΠ»Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ.

ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS (Wii Buttons)

Плюсs: всСго ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ» для создания ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π΅Π΅ оформлСния, ΠΎΡ‡Π΅Π½ΡŒ простая рСализация, достаточно красивоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅.

ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Β«Ρ€Π°Π·Π΄Π²ΠΈΠΆΠ½Ρ‹Ρ… Π΄Π²Π΅Ρ€Π΅ΠΉΒ»

ΠœΠΈΠ½ΡƒΡΡ‹: Π΄Π²Π° Ρ„Π°ΠΉΠ»Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с эффСктом наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠŸΠ»ΡŽΡΡ‹: красивоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ красивых ΠΊΠ½ΠΎΠΏΠΎΠΊ сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π’ минусах этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Ρ‚Π°ΠΊ ΠΆΠ΅ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ Π΄Π²ΡƒΡ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ для Ρ„ΠΎΠ½ΠΎΠ². Плюс: ΠΎΡ‡Π΅Π½ΡŒ простая рСализация.

Автор: Π‘Π΅Ρ€Π³Π΅ΠΉ Минкин

ЗанимаСтся Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ², Ρ„ΠΈΡ€ΠΌΠ΅Π½Π½Ρ‹Ρ… стилСй, Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ сайтов. www.sergeyminkin.ru.

РасскаТитС Π΄Ρ€ΡƒΠ·ΡŒΡΠΌ

ΠžΡ†Π΅Π½ΠΈΡ‚Π΅ ΡΡ‚Π°Ρ‚ΡŒΡŽ:

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ с Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΌΠΈ ΡƒΠ³Π»Π°ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π’ CSS3 Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ элСмСнтам Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства border-radius. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° это Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρƒ вас Π΅ΡΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°.

  

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ div Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ, ΠΌΡ‹ установим Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅ΠΌΡƒ красный Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°.

  .red_div {
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
  высота: 100 пиксСлСй;
}
  

НиТС приводится Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π²Ρ‹ΡˆΠ΅ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π±Π»ΠΎΠΊΠ° Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΌΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ:

Π’Ρ‹ΡˆΠ΅ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ устанавливаСт радиус 15 пиксСлСй Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ, Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΠΏΡ€Π°Π²ΠΎΠΌ, Π½ΠΈΠΆΠ½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΏΡ€Π°Π²ΠΎΠΌ ΡƒΠ³Π»Π°Ρ… элСмСнта. Π§Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ радиуса, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ скруглСнным становится ΠΊΡ€Π°ΠΉ.

НиТС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π²Ρ‹ΡˆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ.

Бвойство border-radius ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ нСсколькими способами.

Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ значСния для свойства установит для всСх Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… ΠΊΡ€Π°Π΅Π² элСмСнта радиус этого значСния.

  радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 15 пиксСлСй 15 пиксСлСй;
  

Π‘ двумя значСниями ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ Π»Π΅Π²ΠΎΠΌΡƒ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΡƒΠ³Π»Ρƒ, Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ — ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ Π»Π΅Π²ΠΎΠΌΡƒ ΡƒΠ³Π»Π°ΠΌ

  радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 15px 15px 15px;
  

ΠŸΡ€ΠΈ Ρ‚Ρ€Π΅Ρ… значСниях ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π°, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»ΠΎΠ², Π° Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΡƒΠ³Π»Ρƒ.

  радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 15px 15px 15px 15px;
  

Π’Ρ‹ΡˆΠ΅ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ явно устанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ края.Π’Ρ‹ΡˆΠ΅ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚ΠΎΠ΅ являСтся сокращСниСм для ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ΅ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‚Π°ΠΊΠΆΠ΅ явно Π΄Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ края.

  Π³Ρ€Π°Π½ΠΈΡ†Π°-Π²Π΅Ρ€Ρ…-Π»Π΅Π²Ρ‹ΠΉ-радиус: 15 пиксСлСй;
Π³Ρ€Π°Π½ΠΈΡ†Π°-Π²Π΅Ρ€Ρ…-ΠΏΡ€Π°Π²Ρ‹ΠΉ-радиус: 15 пиксСлСй;
Π³Ρ€Π°Π½ΠΈΡ†Π°-Π½ΠΈΠΆΠ½ΠΈΠΉ-ΠΏΡ€Π°Π²Ρ‹ΠΉ-радиус: 15 пиксСлСй;
Π³Ρ€Π°Π½ΠΈΡ†Π°-Π½ΠΈΠΆΠ½ΠΈΠΉ-Π»Π΅Π²Ρ‹ΠΉ-радиус: 15 пиксСлСй;
  

Π’ рассмотрСнном Π½Π°ΠΌΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ установили ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для всСх ΠΊΡ€Π°Π΅Π². Π’Ρ‹, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ значСния для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π΅Π±Ρ€Π°, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ² ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ

border-radius ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ для Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов.НиТС ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для добавлСния Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ² ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅.

  ΠΊΠ½ΠΎΠΏΠΊΠ° {
  ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
  высота: 100 пиксСлСй;
  радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 20 пиксСлСй;
}
  

Кнопка Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

Π’ΠΎΡ‚ Π΅Ρ‰Π΅ нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ

ion-button: Ionic Framework API Docs

Кнопки ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ… ΠΈΠ»ΠΈ Π² любом мСстС, Π³Π΄Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ простыС стандартныС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ. Они ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ тСкст, Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈΠ»ΠΈ ΠΈ Ρ‚ΠΎ, ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.Кнопкам ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ нСсколько Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ выглядСли ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

Π­Ρ‚ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ позволяСт ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ встроСнными Π±Π»ΠΎΠΊΠ°ΠΌΠΈ, Π½ΠΎ установка этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½Π° элСмСнт Π±Π»ΠΎΠΊΠ° ΠΏΠΎΠ»Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π”Π΅Ρ‚Π°Π»ΠΈ
Π±Π»ΠΎΠΊ Кнопка Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ с Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΌΠΈ ΡƒΠ³Π»Π°ΠΌΠΈ.
ΠΏΠΎΠ»Π½Ρ‹ΠΉ Кнопка Π²ΠΎ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ с ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΌΠΈ ΡƒΠ³Π»Π°ΠΌΠΈ ΠΈ Π±Π΅Π· Ρ€Π°ΠΌΠΊΠΈ слСва ΠΈΠ»ΠΈ справа.

Π­Ρ‚ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ опрСдСляСт Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠΈ. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ сплошной Ρ„ΠΎΠ½, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅ находится Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов, ΠΈ Π² этом случаС Ρƒ Π½Π΅Π΅ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π”Π΅Ρ‚Π°Π»ΠΈ
ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Кнопка с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ, Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌ ΠΏΠ»ΠΎΡΠΊΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ.
ΠΊΠΎΠ½Ρ‚ΡƒΡ€ Кнопка с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ ΠΈ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ Ρ€Π°ΠΌΠΊΠΎΠΉ.
Ρ†Π΅Π»ΡŒΠ½Ρ‹ΠΉ Кнопка с Π·Π°ΠΊΡ€Π°ΡˆΠ΅Π½Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ. ПолСзно для ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов.

Π­Ρ‚ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ опрСдСляСт Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Установка этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ высоту ΠΈ отступ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π”Π΅Ρ‚Π°Π»ΠΈ
ΠΌΠ°Π»Ρ‹ΠΉ ΠŸΡƒΠ³ΠΎΠ²ΠΈΡ†Π° с мСньшСй высотой ΠΈ Π½Π°Π±ΠΈΠ²ΠΊΠΎΠΉ. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² элСмСнтС.
ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Кнопка с высотой ΠΈ отступом ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.ПолСзно для ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² элСмСнтС.
большой ΠŸΡƒΠ³ΠΎΠ²ΠΈΡ†Π° с ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½ΠΎΠΉ высотой ΠΈ Π½Π°Π±ΠΈΠ²ΠΊΠΎΠΉ.

Кнопки элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹: 5 способов ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΡƒΠ»Π΅Π½Π΅ΠΏΡ€ΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΌΠΈ ΠΈ красивыми

Если ваша Π²Π΅Π±-страница — это ваш ΠΌΠ°Π³Π°Π·ΠΈΠ½, Π° ваша элСктронная ΠΏΠΎΡ‡Ρ‚Π° — это Π²ΠΈΡ‚Ρ€ΠΈΠ½Π° вашСго ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°, Ρ‚ΠΎ ваша ΠΊΠ½ΠΎΠΏΠΊΠ° с ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ (CTA) — это ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π°Ρ Π²ΠΈΡ‚Ρ€ΠΈΠ½Π°, ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΡŽΡ‰Π°Ρ людСй. Или Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π² этом Ρ€ΠΎΠ΄Π΅. Моя ΠΌΠ΅Ρ‚Π°Ρ„ΠΎΡ€Π°, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, здСсь Ρ€Π°Π·Π²Π°Π»ΠΈΠ»Π°ΡΡŒ.

ИзлишнС Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ваш CTA — ΠΎΠ΄Π½Π° ΠΈΠ· самых Π²Π°ΠΆΠ½Ρ‹Ρ… частСй вашСго элСктронного письма.И Ссли Π΅Π³ΠΎ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ Π½Π°ΠΉΡ‚ΠΈ, слоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΡΠ»ΠΎΠΌΠ°Ρ‚ΡŒ, ваши подписчики сбСгут. (Π‘Π΅Π³ΠΈ!)

Но Π½Π΅ Π²ΠΎΠ»Π½ΡƒΠΉΡ‚Π΅ΡΡŒ. ΠœΡ‹ здСсь, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ваша ΠΊΠ½ΠΎΠΏΠΊΠ° CTA — это Π½Π΅ ΠΊΡ€ΠΎΠ²ΠΎΠΆΠ°Π΄Π½Ρ‹ΠΉ ΠΊΡ€ΠΎΠ»ΠΈΠΊ, ΠΎΡ‚Π³ΠΎΠ½ΡΡŽΡ‰ΠΈΠΉ Π²Π°ΡˆΠΈΡ… подписчиков. Π’ этом сообщСнии Π±Π»ΠΎΠ³Π° ΠΌΡ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ рассмотрим ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ создания ΠΊΠ½ΠΎΠΏΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ для Π²Π°ΡˆΠΈΡ… подписчиков.

ΠŸΡ€ΠΈΠ³ΠΎΡ‚ΠΎΠ²ΡŒΡ‚Π΅ΡΡŒ ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ:

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ пулСнСпробиваСмая ΠΊΠ½ΠΎΠΏΠΊΠ°?

ΠŸΡƒΠ»Π΅Π½Π΅ΠΏΡ€ΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

— это ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, созданныС с использованиСм ΠΊΠΎΠ΄Π° вмСсто ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Π΄Π΅ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ свои GIF, PNG ΠΈ JPEG Π½Π° HTML ΠΈ CSS. ΠŸΡ€ΠΈ использовании Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ΄Π° ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π²ΠΎ всСх ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°Ρ… Π΄Π°ΠΆΠ΅ с ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ изобраТСниями, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΈΡ… Β«ΠΏΡƒΠ»Π΅Π½Π΅ΠΏΡ€ΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΌΠΈΒ».

Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ содСрТимоС ΠΈ ΡΡ‚ΠΈΠ»ΡŒ ΠΊΠ½ΠΎΠΏΠΎΠΊ, просто ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π² HTML-шаблон. Π’Π°ΠΌ большС Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° созданиС ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² Ρ‚Π°ΠΊΠΎΠΌ срСдствС Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠ°ΠΊ Photoshop, Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ ΠΈΡ… Π½Π° сСрвСр ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ HTML.

НС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния

Π― скаТу это ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· ΠΈ большС Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ скаТу.ЕдинствСнная Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ пулСнСпробиваСмая ΠΊΠ½ΠΎΠΏΠΊΠ° — это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

* Π²Π·Π΄ΠΎΡ… *

Π― знаю. Но это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ СдинствСнный способ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ваша ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ Π² 100% ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ². ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ всС ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ, насколько Π½Π΅ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ наши элСктронныС письма ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π² Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°Ρ…, прилоТСниях ΠΈ устройствах.

НСсмотря Π½Π° это, Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. Кнопки с изобраТСниями Ρ‚Π΅Ρ€ΡΡŽΡ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° изобраТСния ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ ΠΈΠ·-Π·Π° Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈ ΠΎΠ½ΠΈ нСдоступны для Π²Π°ΡˆΠΈΡ… подписчиков, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ чтСния с экрана (ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ± этом Ρ‡Π΅Ρ€Π΅Π· сСкунду).

Кнопка изобраТСния тСряСт эффСкт, ΠΊΠΎΠ³Π΄Π° изобраТСния ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹.

Если ваши ΠΏΡ€ΠΈΠ·Ρ‹Π²Ρ‹ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ содСрТатся Π² изобраТСниях, Π΅ΡΡ‚ΡŒ большая Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ подписчики упустили вашС сообщСниС. Π₯ΡƒΠΆΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ΠΈ Π½Π΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ с вашими кампаниями.

ИспользованиС ΠΊΠ½ΠΎΠΏΠΎΠΊ с ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π½Π° основС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Ρ‚Π°ΠΊΠΆΠ΅ влияСт Π½Π° Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ вашСй элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹. Если Π²Ρ‹ скрываСтС контСкст ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π²Π½ΡƒΡ‚Ρ€ΠΈ изобраТСния, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ чтСния с экрана ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΈΡ…, Ρ‡Ρ‚ΠΎ сдСлаСт Π²Π°ΡˆΡƒ ΡΠ»Π΅ΠΊΡ‚Ρ€ΠΎΠ½Π½ΡƒΡŽ ΠΏΠΎΡ‡Ρ‚Ρƒ нСдоступной для подписчиков с ослаблСнным Π·Ρ€Π΅Π½ΠΈΠ΅ΠΌ.

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

Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΎΡ‚ΠΊΠ°ΠΆΠΈΡ‚Π΅ΡΡŒ ΠΎΡ‚ ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠ² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ с изобраТСниями ΠΈ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ подписчики ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ваши ΠΏΡ€ΠΈΠ·Ρ‹Π²Ρ‹ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ΅ устройство ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚.

Π—Π°Π΄Π°Ρ‚ΠΊΠΈ красивого Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ

Кнопки — это большС, Ρ‡Π΅ΠΌ просто ΠΊΠΎΠ΄. Π•ΡΡ‚ΡŒ нСсколько Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ ваши ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ.

Π€ΠΎΡ€ΠΌΠ° ΠΏΡƒΠ³ΠΎΠ²ΠΈΡ†Ρ‹

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ваши ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ.

ВсС ΠΌΡ‹ любим Π΄Π΅Π»Π°Ρ‚ΡŒ Π·Π°Π±Π°Π²Π½Ρ‹Π΅ ΠΈ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½ΠΎ часто, Ссли Π²Ρ‹ слишком Π΄Π°Π»Π΅ΠΊΠΎ ΠΎΡ‚ΠΊΠ»ΠΎΠ½ΠΈΡ‚Π΅ΡΡŒ ΠΎΡ‚ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ³ΠΎ, подписчики упустят Ρ†Π΅Π»ΡŒ ΠΈ Π½Π΅ ΠΏΡ€Π΅Π΄ΠΏΡ€ΠΈΠΌΡƒΡ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… дСйствий.Π”Π°, слова ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ наТимаСтся, Π½ΠΎ, ΠΊΠ°ΠΊ говорится, Β«ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° стоит тысячи слов».

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ стандартной Ρ„ΠΎΡ€ΠΌΡ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ людСй, особСнно Ссли ΠΎΠ½ΠΈ ΡΠΊΠ°Π½ΠΈΡ€ΡƒΡŽΡ‚. Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚:

  • Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹
  • Π£Π³ΠΎΠ» ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΉ
  • Π’Π°Π±Π»Π΅Ρ‚ΠΊΠ° Π² Ρ„ΠΎΡ€ΠΌΠ΅
  • Кнопка ΠΏΡ€ΠΈΠ·Ρ€Π°ΠΊΠ°
  • Кнопка с Π·Π°Ρ‚Π΅ΠΌΠ½Π΅Π½ΠΈΠ΅ΠΌ

Π­Ρ‚ΠΎ Π½Π΅ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ с ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ нСльзя Π΄Π΅Π»Π°Ρ‚ΡŒ Π·Π°Π±Π°Π²Π½Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ. Magic Spoon Π΄ΠΎΠ±Π°Π²ΠΈΠ»Π° ΠΊ своим ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ нСсколько Π·Π°Π±Π°Π²Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… GIF-Ρ„Π°ΠΉΠ»ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ ΠΊ Π½ΠΈΠΌ Π΅Ρ‰Π΅ большС внимания.

Π Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΠΈ

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π±ΠΎΠ»Π΅Π΅ 40% подписчиков ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ элСктронныС письма Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, согласно нашим Π΅ΠΆΠ΅Π³ΠΎΠ΄Π½Ρ‹ΠΌ Π΄Π°Π½Π½Ρ‹ΠΌ ΠΎ Ρ€Ρ‹Π½ΠΎΡ‡Π½ΠΎΠΉ Π΄ΠΎΠ»Π΅ ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваша ΠΊΠ½ΠΎΠΏΠΊΠ° Π±Ρ‹Π»Π° спроСктирована Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° Ρ€Π°Π±ΠΎΡ‚Π°Π»Π° Π½Π° всСх устройствах.

Если ваша ΠΊΠ½ΠΎΠΏΠΊΠ° слишком ΠΌΠ°Π»Π°, Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах Π±ΡƒΠ΄Π΅Ρ‚ слоТно Π½Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ. Если ΠΎΠ½ слишком большой, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ мСньшС ΠΏΠΎΡ…ΠΎΠΆ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ, Π° большС Π½Π° элСмСнт Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π‘Ρ‹Π»ΠΎ ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½ΠΎ нСсколько исслСдований Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° сСнсорных экранах, Π½ΠΎ исслСдования, ΠΏΠΎΡ…ΠΎΠΆΠ΅, Ρ‡Π°Ρ‰Π΅ всСго проводятся с использованиСм ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅Ρ‚Ρ€ΠΎΠ² Π² качСствС основной Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ измСрСния.Π§Ρ‚ΠΎ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ идСально. Но Ρƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ ΠΏΡ€ΠΈΠ»ΠΈΡ‡Π½ΠΎΠ΅ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅Ρ‚Ρ€Π° ΠΊ пиксСлю.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ для ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ наТатия Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах составляСт ΠΎΡ‚ 42 Π΄ΠΎ 72 пиксСлСй (ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ 11-19 ΠΌΠΌ). Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ срСдняя высота ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ здСсь, Π² Litmus, Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΏΠ°Π΄Π°ΡŽΡ‚ Π² этот Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½.

Π’ ΠΎΠ΄Π½ΠΎΠΌ исслСдовании, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ»ΠΎΡΡŒ Π΄ΠΎ 30 ΠΌΠΌ, Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒ ΠΎΡ‚ прикосновСния ΠΊ Ρ‰Π΅Π»Ρ‡ΠΊΡƒ ΡƒΠΏΠ°Π»Π° Π΄ΠΎ 20 ΠΌΠΌ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΊΠΎΠ³Π΄Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΠΈ большС Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ большого значСния.

ΠœΠ΅ΡΡ‚ΠΎ для ΠΊΠ½ΠΎΠΏΠΎΠΊ

Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠ½ΠΎΠΏΠΎΠΊ достаточно свободного мСста, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π²Ρ‹Π΄Π΅Π»ΡΠ»ΠΈΡΡŒ. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ позволяСт вашим подписчикам Π½Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ.

Π›ΡƒΡ‡ΡˆΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ этого ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ элСктронноС письмо с большим количСством ссылок Π² ΠΎΠ΄Π½ΠΎΠΌ Π°Π±Π·Π°Ρ†Π΅. Если Π²Ρ‹ сгруппируСтС свои ссылки Π±Π»ΠΈΠ·ΠΊΠΎ Π΄Ρ€ΡƒΠ³ ΠΊ Π΄Ρ€ΡƒΠ³Ρƒ, ваши подписчики Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π»ΠΈ, особСнно Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах.

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Π°Ρ обратная связь

НС ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹ΠΉ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты, Π½ΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ интСрактивности для обСспСчСния Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ подписчикам Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΡ… взаимодСйствиС зарСгистрировано.

Для Π½ΠΈΡ… это Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π·Π½Π°ΠΊ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π° Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ.

Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊ простоС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π°, Ρ‚Π°ΠΊ ΠΈ слоТноС ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ ТСланию. (ΠœΡ‹ Π·Π½Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ Π²Ρ‹ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΈΠ·ΠΎ всСх сил, поэтому Π½Π΅ ΡΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ΡΡŒ — Π½ΠΎ Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠΎΠ³Π΄Π° ΡΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ сСбя.)

Наша собствСнная стандартная ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π°, Π° Ρ‚Π°ΠΊΠΆΠ΅ эффСкт ΠΊΠ½ΠΎΠΏΠΊΠΈ.

Но ΠΌΡ‹ Ρ‚ΠΎΠΆΠ΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π»ΠΈ ΠΊΠΎΠ΅-Ρ‡Ρ‚ΠΎ новСнькоС ΠΈ ΠΎΡ‡Π΅Π½ΡŒ повСсСлились с ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ январской рассылки. ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ элСмСнт Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‚Π°ΠΊΠΆΠ΅ Π±Ρ‹Π»ΠΎ интСрСсно Β«ΠΏΠΎΠ΄Ρ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΒ».”

ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π”Π΅Ρ€ΠΆΠΈΡ‚Π΅ Π²Π°ΡˆΡƒ Ρ„Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ копию с ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ ΠΈΠ»ΠΈ ярлык Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΠΏΠΎ сущСству. Π‘ΠΎΠΎΠ±Ρ‰ΠΈΡ‚Π΅ подписчикам, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ сдСлали, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ яснСС ΠΈ ΠΊΡ€Π°Ρ‚ΠΊΠΎ.

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ достаточно ΠΎΡ‚ 1 Π΄ΠΎ 5 слов.

Π­Ρ‚Π° Π΄Π»ΠΈΠ½Π° Ρ‚Π°ΠΊΠΆΠ΅ позволяСт ΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π°ΡˆΡƒ ΡΠ»Π΅ΠΊΡ‚Ρ€ΠΎΠ½Π½ΡƒΡŽ ΠΏΠΎΡ‡Ρ‚Ρƒ. А Ссли Π΅ΡΡ‚ΡŒ Ρ‡Ρ‚ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ? Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½Π°Π΄ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. РСгулярно сохраняя ΠΏΡ€ΠΈΠ·Ρ‹Π²Ρ‹ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΠΎΡ‚ 1 Π΄ΠΎ 5 слов, это Π΄Π΅Π»Π°Π΅Ρ‚ Ρ‚ΠΎΡ‚ Ρ€Π΅Π΄ΠΊΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π΅Π³ΠΎ просматриваСтС, Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ Π·Π½Π°Ρ‡ΠΈΠΌΡ‹ΠΌ.

5 способов кодирования ΠΏΡƒΠ»Π΅Π½Π΅ΠΏΡ€ΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π‘ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 300 000 ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сообщСний элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹, Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»ΠΈ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, которая Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²Π΅Π·Π΄Π΅?

Π§Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‚Π°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ, которая Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΠΎΡ‡Ρ‚ΠΈ Π²Π΅Π·Π΄Π΅. И Π΅ΡΡ‚ΡŒ нСсколько Ρ€Π°Π·Π½Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² создания этих ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² зависимости ΠΎΡ‚ Π²Π°ΡˆΠΈΡ… потрСбностСй. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΡΡΠ½ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ… Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π²Π°ΡˆΠΈΡ… подписчиков.

1. Кнопка условного заполнСния

Бпасибо ΠœΠ°Ρ€ΠΊΡƒ Роббинсу Π·Π° эту ΠΊΠ½ΠΎΠΏΠΊΡƒ с условным Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ.Π­Ρ‚ΠΎ Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ здСсь, Π² Litmus.

Π­Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ стили для ссылки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ для всСх, ΠΊΡ€ΠΎΠΌΠ΅ Outlook. Π—Π°Ρ‚Π΅ΠΌ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ условный ΠΊΠΎΠ΄ для добавлСния заполнСния, спСцифичного для Outlook. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Outlook контролируСтся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Outlook, Π½Π΅ влияя Π½Π° внСшний Π²ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°Ρ….

Как ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² бутстрапС 4?

< html >

< Π³Π»Π°Π²Π° >

Как ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π² бутстрапС 4?

Π½Π°Π·Π²Π°Π½ΠΈΠ΅ >

< ΠΌΠ΅Ρ‚Π° ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΠ° = "utf-8"

9000

< meta name = "viewport" content = "width = device-width, initial-scale = 1" >

< ссылка rel = Β«Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй» href =

< скрипт src

0

сцСнарий >

90 008 < скрипт src =

скрипт >

< скрипт

8 скрипт >

< ΡΡ‚ΠΈΠ»ΡŒ Ρ‚ΠΈΠΏ = "тСкст / css" >

Ρ†Π²Π΅Ρ‚: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;

}

.xyz {

Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½Π°: Π°Π²Ρ‚ΠΎ;

Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;

padding-top: 100px;

}

.btn-circle.btn-sm {

ΡˆΠΈΡ€ΠΈΠ½Π°: 30 пиксСлСй;

высота: 30 пиксСлСй;

отступ: 6px 0px;

border-radius: 15px;

font-size: 8px;

Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;

}

.btn-circle.btn-md {

ΡˆΠΈΡ€ΠΈΠ½Π°: 50 пиксСлСй;

высота: 50 пиксСлСй;

отступ: 7px 10px;

border-radius: 25px;

font-size: 10px;

Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;

}

.btn-circle.btn-xl {

ΡˆΠΈΡ€ΠΈΠ½Π°: 70 пиксСлСй;

высота: 70 пиксСлСй;

отступ: 10 пиксСлСй 16 пиксСлСй;

border-radius: 35px;

font-size: 12px;

Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;

}

ΡΡ‚ΠΈΠ»ΡŒ >

Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° >

корпус < класс корпус = "xyz" >

< h2 > GeeksforGeeks h2 >

ΠšΡ€ΡƒΠ³Π»Ρ‹ΠΉ> ΠžΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Кнопки h5 >

< ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΈΠΏ = "ΠΊΠ½ΠΎΠΏΠΊΠ°" класс = "btn btn-primary btn-circle" > Π‘ΠΈΠ½ΠΈΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ° >

< ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΈΠΏ = 9000 8 Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β» класс = Β«btn btn-secondary btn-circle btn-smΒ» > сСрый ΠΊΠ½ΠΎΠΏΠΊΠ° >

< ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΈΠΏ = Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β» класс = Β«btn btn-success btn-circle btn-smΒ» > ЗСлСная ΠΊΠ½ΠΎΠΏΠΊΠ° >

< ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΈΠΏ = Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β» класс = Β«btn btn-dangerous btn-circle btn-smΒ» > ΠšΡ€Π°ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° >

< ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΈΠΏ = Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β» класс = Β«btn btn-warning btn-circle btn-smΒ» > ЖСлтая ΠΊΠ½ΠΎΠΏΠΊΠ° >

<900 08 ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΈΠΏ = Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β» класс = Β«btn btn-light btn-circle btn-smΒ» > БСлая ΠΊΠ½ΠΎΠΏΠΊΠ° >

< ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΈΠΏ = Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β» класс = Β«btn btn-dark btn-circle btn-smΒ» > Π§Π΅Ρ€Π½Ρ‹ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ° >

< h5 > Π‘ΠΎΠ»ΡŒΡˆΠΈΠ΅ ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ h5 >

< ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΈΠΏ ΠΊΠ½ΠΎΠΏΠΊΠΈ = " " " class = "btn btn-primary btn-circle btn-xl" > Π‘ΠΈΠ½ΠΈΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ° >

< ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΈΠΏ = 90 008 Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β» класс = Β«btn btn-secondary btn-circle btn-xlΒ» > сСрый ΠΊΠ½ΠΎΠΏΠΊΠ° >

< ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΈΠΏ = Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β» класс = Β«btn btn-success btn-circle btn-xlΒ» > ЗСлСная ΠΊΠ½ΠΎΠΏΠΊΠ° >

< ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΈΠΏ = Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β» класс = Β«btn btn-dangerous btn-circle btn-xlΒ» > ΠšΡ€Π°ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° >

ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΈΠΏ = Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β» класс = Β«btn btn-warning btn-circle btn-xlΒ» > ЖСлтая ΠΊΠ½ΠΎΠΏΠΊΠ° >

<9 0008 ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΈΠΏ = Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β» класс = Β«btn btn-light btn-circle btn-xlΒ» > Π‘Π΅Π»Ρ‹ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ° >

< button type = Β«buttonΒ» class = Β«btn btn-dark btn-circle btn-xlΒ» > Π§Π΅Ρ€Π½Ρ‹ΠΉ button >

корпус >

html >

Borders Β· Bootstrap

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ для создания Π³Ρ€Π°Π½ΠΈΡ†, Ρ‡Ρ‚ΠΎΠ±Ρ‹ быстро Π·Π°Π΄Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ радиуса Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта.ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠ»ΠΈ любого Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ элСмСнта.

Π“Ρ€Π°Π½ΠΈΡ†Π°

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ для создания Π³Ρ€Π°Π½ΠΈΡ†, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта. Π’Ρ‹Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ ΠΈΠ· всСх Π³Ρ€Π°Π½ΠΈΡ† ΠΈΠ»ΠΈ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ.

ΠŸΡ€ΠΈΡΠ°Π΄ΠΊΠ°

   
 
 
 
   

Π‘ΡƒΠ±Ρ‚Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅

   
 
 
 
   

Π¦Π²Π΅Ρ‚ Ρ€Π°ΠΌΠΊΠΈ

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚, созданных Π½Π° основС Ρ†Π²Π΅Ρ‚ΠΎΠ² нашСй Ρ‚Π΅ΠΌΡ‹.

   
 
 
 
 
 
 
 
   

Радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ классы ΠΊ элСмСнту, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»Π΅Π³ΠΊΠΎ ΡΠΊΡ€ΡƒΠ³Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΡƒΠ³Π»Ρ‹.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½ΠΎΠ³ΠΎ изобраТСния 75x75 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ скруглСнного свСрху изобраТСния 75x75 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ скруглСнного справа изобраТСния 75x75 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ скруглСнного Π²Π½ΠΈΠ·Ρƒ изобраТСния 75x75 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ скруглСнного слСва изобраТСния 75x75 ΠŸΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΊΡ€ΡƒΠ³Π»ΠΎΠ³ΠΎ изобраТСния 75x75 ΠžΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π°Π±Π»Π΅Ρ‚ΠΊΠΈ 150x75 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ изобраТСния Π±Π΅Π· Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½ΠΈΠΉ (отмСняСт ΠΎΠΊΡ€ΡƒΠ³Π»Π΅Π½ΠΈΠ΅, ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½ΠΎΠ΅ Π³Π΄Π΅-Π»ΠΈΠ±ΠΎ Π΅Ρ‰Π΅) 75x75

   ... 
...
...
...
...
...
...
...  

Π Π°Π·ΠΌΠ΅Ρ€Ρ‹

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ . Round-lg ΠΈΠ»ΠΈ . Round-sm для большСго ΠΈΠ»ΠΈ мСньшСго радиуса Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ малСнького Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½ΠΎΠ³ΠΎ изобраТСния 75x75 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ большого Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½ΠΎΠ³ΠΎ изобраТСния 75x75

  ... 
...  

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ со скруглСнными ΡƒΠ³Π»Π°ΠΌΠΈ Π² CSS

CSS Кнопки со скруглСнными ΡƒΠ³Π»Π°ΠΌΠΈ - ΠΌΡ‹ всС любим ΠΈΡ…, Π½ΠΎ ΠΊΠ°ΠΊ, Ρ‡Π΅Ρ€Ρ‚ возьми, Π²Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML ΠΈ CSS?

Π₯ΠΎΡ€ΠΎΡˆΠΈΠ΅ новости: это ΠΎΡ‡Π΅Π½ΡŒ просто ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ.

НадСюсь, Π²Ρ‹ Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ просто Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ эффСкт Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½ΠΎ Π½Π΅ Π·Π½Π°Π΅Ρ‚, с Ρ‡Π΅Π³ΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ.

НичСго ΡΡ‚Ρ€Π°ΡˆΠ½ΠΎΠ³ΠΎ, Π½Π°ΠΌ всСм Π½ΡƒΠΆΠ½ΠΎ с Ρ‡Π΅Π³ΠΎ-Ρ‚ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ, ΠΈ я здСсь, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ Π² этом.

Кнопка CSS
ЗСлСная ΠΊΠ½ΠΎΠΏΠΊΠ° с Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΈ Π±Π΅Π»Ρ‹ΠΌ тСкстом ссылки.

Кнопка CSS с Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΌΠΈ ΡƒΠ³Π»Π°ΠΌΠΈ
Π‘ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΌΠΈ ΡƒΠ³Π»Π°ΠΌΠΈ получаСтся
, Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° Π±Ρ‹Π»Π° Π΅Ρ‰Π΅ Ρ‡ΡƒΡ‚ΡŒ-Ρ‡ΡƒΡ‚ΡŒ, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ?

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° HTML:
ВсС Π΄Π΅Π»ΠΎ Π² классС css, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΠΎΠΌ здСсь ΠΊ ссылкС.

ΠΊΠ½ΠΎΠΏΠΊΠ° CSS с Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΌΠΈ ΡƒΠ³Π»Π°ΠΌΠΈ

ΠΊΠ½ΠΎΠΏΠΊΠ° CSS закруглСнная

CSS:
Π—Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ добавляСм отступ, Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, Π±Π΅Π»Ρ‹ΠΉ тСкст ссылки, ΡˆΠΈΡ€ΠΈΠ½Ρƒ, удаляСм ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ссылки ΠΈ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ тСкст. Π”Π°, ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ с радиусом 8 пиксСлСй.

.css-button-rounded {
Ρ„ΠΎΠ½: # 2fc974;
Ρ†Π²Π΅Ρ‚: #fff;
дисплСй: блок;
отступ: 20 пиксСлСй 10 пиксСлСй;
Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: Ρ†Π΅Π½Ρ‚Ρ€;
тСкстовоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ‚;
ΡˆΠΈΡ€ΠΈΠ½Π°: 350 пиксСлСй;
радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 8 пиксСлСй; // здСсь Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹
}

.css-button-Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΉ {

background: # 2fc974;

Ρ†Π²Π΅Ρ‚: #fff;

дисплСй: блок;

отступ: 20 пиксСлСй 10 пиксСлСй;

Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;

тСкстовоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ‚;

ΡˆΠΈΡ€ΠΈΠ½Π°: 350 пиксСлСй;

радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 8 пиксСлСй; // здСсь скруглСнныС ΡƒΠ³Π»Ρ‹

}

НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ прСфиксы Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° CSS3:
Если это Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ смысла, Π΄Π°ΠΉΡ‚Π΅ ΠΌΠ½Π΅ Π·Π½Π°Ρ‚ΡŒ, ΠΈ я добавлю сообщСниС ΠΎ прСфиксах поставщиков Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

.css-button-rounded {
-webkit-border-radius: 8 пиксСлСй;
-moz-border-radius: 8 пиксСлСй;
-ms-border-radius: 8 пиксСлСй;
-o-border-radius: 8 пиксСлСй;
}

.css-button-Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΉ {

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

-ms-border-radius: 8px;

-o-border-radius: 8px;

}

И, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, эффСкт зависания:

.css-button-rounded: hover {
Ρ„ΠΎΠ½: # EC2951;
}

.css-button-roundround: hover {

background: # EC2951;

}

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

Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ просто, ΠΈ Π² ΠΊΠΎΠ½Ρ†Π΅ ΡƒΡ€ΠΎΠΊΠ° Π²Ρ‹ смоТСтС ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ свои HTML-ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌΠΈ Π½Π° ΠΊΡ€ΡƒΠ³.


Π¨Π°Π³ 1. ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² HTML

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ шаг всСгда самый простой ΠΈ прямой. Π˜Ρ‚Π°ΠΊ, ΠΌΡ‹ опрСдСляСм структуру простой ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅ΠΌ Π² Π½Π΅Π΅ класс, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ·ΠΆΠ΅ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

 <ΠΊΠ½ΠΎΠΏΠΊΠ°>
ОК!
 

Π¨Π°Π³ 2. ΠŸΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π² ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ

Π§Ρ‚ΠΎΠ±Ρ‹ наша ΠΊΠ½ΠΎΠΏΠΊΠ° Π±Ρ‹Π»Π° ΠΊΡ€ΡƒΠ³ΠΎΠΌ, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ выглядСла ΠΊΠ°ΠΊ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚. Π― имСю Π² Π²ΠΈΠ΄Ρƒ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ сдСлаСм Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота ΠΈΠΌΠ΅Π»ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ .Π’ этом случаС ΠΌΡ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ 50 пиксСлСй.

 .redondo {
  дисплСй: блок;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 50 пиксСлСй;
  высота: 50 пиксСлСй;
} 

Π¨Π°Π³ 3. ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ 50% с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ собираСмся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ наш ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΌ. Π‘ радиусом края 50% ΠΌΡ‹ сдСлаСм ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΊΡ€ΡƒΠ³Π»ΠΎΠΉ.

 .redondo {
  дисплСй: блок;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 50 пиксСлСй;
  высота: 50 пиксСлСй;
  радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 50%;
} 

ΠŸΠΎΡ‡Π΅ΠΌΡƒ радиус ΠΊΡ€ΠΎΠΌΠΊΠΈ 50%?

Бвойство CSS β€˜border-radius’ Π΄Π°Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΡƒΠ³Π»Ρƒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ .Если ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«50%Β», ΠΌΡ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ составляСт 50% ΡˆΠΈΡ€ΠΈΠ½Ρ‹ / высоты нашСго элСмСнта. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅, Ссли ΠΌΡ‹ помСстим Β«50%Β» ΠΊΠ°ΠΊ Β«25 пиксСлСй». Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ 50%, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ элСмСнта.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ "border-radius" Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² элСмСнтах:

ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ устанавливаСтС радиус 50% ΠΊΠΎ всСм ΡƒΠ³Π»Π°ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ эффСкт состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ становится ΠΊΡ€ΡƒΠ³ΠΎΠΌ.


Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚: круглая ΠΊΠ½ΠΎΠΏΠΊΠ°

ΠšΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ - круглая ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:

Π₯ΠΎΡ€ΠΎΡˆΠΎ!

ΠŸΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.Π‘ΠΎΠΎΠ±Ρ‰ΠΈΡ‚Π΅ Π½Π°ΠΌ, Ссли Ρƒ вас Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΠΈΠ»ΠΈ вопросы. ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ‚ΠΎ ΠΆΠ΅ самоС ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ Π±ΠΎΠ»ΡŒΡˆΠ΅ΠΌΡƒ количСству элСмСнтов, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, вас Ρ‚Π°ΠΊΠΆΠ΅ заинтСрСсуСт…

ΠŸΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π½Π° Π½Π°ΡˆΡƒ рассылку

.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *