?? ??? ??? ????? ???? ??? ???? ?? ???? ???? ?? ? ??? ???? ?????. Smashing Magazine??? ??? ?? ??? ????. ? ??? ?? ??? ????? ??? ??? ?????. ????? ?? ??, ??? ??? ???? ??? ??? ??? ?????? ??? ????.

?? ?? ?? ?? ??? ????.

???? ?? ???? ???? ?????. ?? ???? ??? ???? ?????, ?? ??? ??? ??? ??? ????. ?? ?? ???? ????? ?????.

??? ??? ??? ?? ??? ????. ???? ??? ??? ???? ?? ???? ??? ?????? ?? ????. ? ?? ????, ??? ???? ???? ????? ???? ?????.

?? ?? ???? ??? ??? ?? ?? ????.

???? ?? ?? ??? ??? ?????? ?? ??? JavaScript? ???? ???? CSS ? ?? ??? ?? ? ? ????.

??? ??? ???? ?? ???? ?? ??? ??? CSS? ?? ? ?? ?? ??? ??? ????!

???? ?????. ?? ???? CodePen ????? ?? ? ????.

??? ????

??? ??? ??? ???? ???????. ??? ?????.

 <button>??!</button>

CSS ??? CSS ??? ?? ??? ?????. ?? ?? ?? ??? ? ???? ??? ??? ?? ??? ??? ?????.

 ?? {
  -BORDERWIDTH : 5;
  -BoxShadowDepth : 8;
  -ButtonColor : #F00;
  -?? ?? : 3;
  -horizontalPadding : 16;
  -TerticalPadding : 8;

  ?? : ??;
  ?? : calc (var (-borderwidth) * 1px) solid var (-buttoncolor);
  Box-Shadow : calc (var (-BoxShadowDepth) * 1px) calc (var (-BoxShadowDepth) * 1px) 0 #888;
  ?? : var (-ButtonColor);
  ?? : ???;
  ?? ?? : calc (var (-Fontsize) * 1REM);
  ?? ?? : ???;
  ?? : ??;
  ?? : calc (var (-verticalpadding) * 1px) calc (var (-horizontalpadding) * 1px);
  ?? : Box-Shadow 0.15S ???;
}

?? : ?? {
  Box-Shadow : calc (var (-BoxShadowDepth) / 2 * 1px) calc (var (-BoxShadowDepth) / 2 * 1px) 0 #888;
}

?? : Active {
  Box-Shadow : 0 0 #888;
}

?? ??? ??? ??? ????.

?? ??! ??? ??? ?? ??? ??? ?? ??? ??? ????. ???? ??? ??? ???????.

???? ??????

?? ?? ??? ??? ??? ??? ???? ??? ????. ??? clip-path ???? ??? ??? ??? ??? ????. clip-path ???? ??? ?? ? ? ????.

?? ??? ?? ?????? . ??? CSS ??? ???? ? ??? ? ????.

???? ?? ?? ??? ??? ? ????. ??? ? ??? ?? ?? ??? ?? ???? ????. ??? ?? ???? ??? ????.

?? ???? ??? ??? ???? ???????. ?? ???????<span></span> ??. ?? ??<span></span> ??? ??? ??? ??? ??? ??????.

<button>
  <span>??!</span>
  ??!
</button>

?? ??? ?????<span></span> ??? ??? ?????. ??? CSS ??? ???? ??? ?????.

 ?? ?? {
  ?? : var (-ButtonColor);
  ?? : calc (var (-borderwidth) * 1px) solid var (-buttoncolor);
  ?? : calc (var (-borderwidth) * -1px);
  ?? : var (-bg, #fafafa);
  ?? : calc (var (-borderwidth) * -1px);
  ?? : calc (var (-verticalpadding) * 1px) calc (var (-horizontalpadding) * 1px);
  ?? : ??;
  ??? : calc (var (-borderwidth) * -1px);
  ?? : calc (var (-borderwidth) * -1px);
}

?????, ??? ? ????<span></span> ????? ??? ??? ??? ?????? ??? ???? ??? ?????. ??? ???? ???? ??? ?????.

 ?? ?? {
  -Clip : ?? (0 100% 0 0);
  -webkit-clip-path : var (-??);
  ?? ?? : var (-??);
  ?? : ?? ?? 0.25S ??, -webkit-clip-path 0.25s ???;
  / * ... ?? div ??? */
}

?? : ?? ?? {
  -Clip : ?? (0 0 0 0);
}

?? ??? ??????

???? ?? ??? ??? ?????? ??? ? ?? ??? ?????. ? ??? ?? ?? ?? ?? ? ??? ????. clip-path ???? ?? ??? ? ???? ?? ? ????.

??? 4? ?????<span></span> ??? ??? ???? ?????.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  ??!
</button>

?? ?? {
  ?? : var (-bg);
  ?? : calc (var (-borderwidth) * -1px);
  -webkit-clip-path : var (-??);
  ?? ?? : var (-??);
  ?? : calc (var (-borderwidth) * -1px);
  ???? : 0.5;
  ?? : ??;
  ??? : calc (var (-borderwidth) * -1px);
  ?? : calc (var (-borderwidth) * -1px);
  z- ??? : 1;
}

CSS ??? ???? ? ??? ?? ??? ??? ?? ? ? ????.

 ?? ?? : nth-of-type (1) {
  ---BG : #00F;
  -Clip : ??? (0 0, 100% 0, 50% 50%, 50% 50%);
}
?? ?? : nth-of-type (2) {
  ---BG : #F00;
  -Clip : ??? (100% 0, 100% 100%, 50% 50%);
}
?? ?? : nth-of-type (3) {
  ---BG : #008000;
  -Clip : ??? (0 100%, 100%100%, 50%50%);
}
?? ?? : nth-of-type (4) {
  ---BG : #800080;
  -Clip : ??? (0 0, 0 100%, 50%50%);
}

?? ???. ??? ?????? ????? ?? ????? ??????.

 ?? ?? : nth-of-type (1) : ??,
?? ?? : nth-of-type (2) : ??,
?? ?? : nth-of-type (3) : ??,
?? ?? : nth-of-type (4) : ?? {
  ???? : 1;
}

?, ??? ??? ????. ??? ???? ? ?? ?? ???? ??? ?? ?? ?? ?? ?? ?? ?? ??? ????. ??? ?? ?? ? ????. ? ??? ???? ?? ??? ??? ?? ??? z-index ? clip-path ??? ??? ? ????.

 ?? ?? : nth-of-type (1) : ??,
?? ?? : nth-of-type (2) : ??,
?? ?? : nth-of-type (3) : ??,
?? ?? : nth-of-type (4) : ?? {
  -Clip : ??? (0 0, 100% 0, 100% 100%, 0 100%);
  ???? : 1;
  z- ??? : 2;
}

?? ??????

??? ??? ?????? ??? ??? ?? ??? ??? ???? ??? ?? ????. ??? ? ??? ??? ?????? ?? ???? ??? ??????!

????? ????? ?? ? ? ?? ??? ??? ?? ? ? ????.

?? ??? ???????.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b>??!</b>
  <b>??!</b>
  <b>??!</b>
  <b>??!</b>
  ??!
</button>

?? CSS? ???? ? ? ????. ???? ????? ??? ???? ?????? ??? ? ? ????. ? ??? ?? ?? clip-path ???????. ?? ?? ?? ?? ??? ??????. ? ?? ?? ??? ???? ? ?? ??? ????.

 ?? B : nth-of-type (1) {
  -Clip : ?? (0 0 100% 0);
}
?? B : nth-of-type (2) {
  -Clip : ?? (0 0 0 100%);
}
?? B : nth-of-type (3) {
  -Clip : ?? (100% 0 0 0);
}
?? B : nth-of-type (4) {
  -Clip : ?? (0 100% 0 0);
}

??? ??? ??? ????? ??? ? ? ?? ??? clip-path ?????? ????.

 ?? ?? : nth-of-type (1) : hover ~ b : nth-of-type (1),
?? ?? : nth-of-type (2) : hover ~ b : nth-of-type (2),
?? ?? : nth-of-type (3) : hover ~ b : nth-of-type (3),
?? ?? : nth-of-type (4) : hover ~ b : nth-of-type (4) {
  -Clip : ?? (0 0 0 0);
}

???! ?? ????? ??? CSS ?? ??? ????.

???

?? ????? ??? ??? ? ? ????.

??? ??? ???? 4 ? ???? ??? ??? ?? ??? ? ????? ????. ?? ???? ??? ??? ??????.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b aria-hidden="true">??!</b>
  <b aria-hidden="true">??!</b>
  <b aria-hidden="true">??!</b>
  <b aria-hidden="true">??!</b>
  ??!
</button>

? ?? ?? ???? ????.

?? ??!

?? ??? CSS ?????? ?? ???? ??? ??? ?? ? ????. ?? ???? ????? ?? ?????? ?? ??? ???? ?? HTML? ??? ??? ????.

?? ??? CSS ??? ???? ?? ??? ???? ???????.

? ?? ? ??? ?? ???? ???? ?? ???? ?? ??? ????? ? ???? ??? ??? ?????. ?? ?? ??? ?? ? ??? ??? ????.

? ??? CSS? ?? ????? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!