{"id":299308,"date":"2020-02-26T15:00:40","date_gmt":"2020-02-26T15:00:40","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=299308"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=299308","title":{"rendered":"\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u0434\u043e\u0431\u0440\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 button"},"content":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/489820\/\">\u041a\u043d\u043e\u043f\u043a\u0430 \u2014 \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445. \u0422\u0435\u0433 <code>&lt;button&gt;&lt;\/button&gt;<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0451\u043d \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043d\u0435\u043a\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0432\u0440\u043e\u0434\u0435 \u0432\u044b\u0432\u043e\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u0412 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435, \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c, \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0451\u0442 \u043e \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u044f\u0445 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>button<\/code> \u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0431\u044b \u0432 \u043b\u044e\u0431\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0442\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043a\u043d\u043e\u043f\u043e\u043a. \u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043c\u044b \u0437\u0434\u0435\u0441\u044c \u0438 \u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438.<\/p>\n<p>  <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/489820\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/k1\/7-\/ql\/k17-qlhlsy-iylytnjcmw4wjrhg.png\"><\/a><br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2><font color=\"#3AC1EF\">\u0421\u0442\u0438\u043b\u0438, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u043a \u043a\u043d\u043e\u043f\u043a\u0430\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/font><\/h2>\n<p>  \u041c\u043e\u0436\u0435\u0442, \u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440 \u043e \u00ab\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u044f\u0445\u00bb \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u0443-\u0442\u043e \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435\u043c \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u044b\u0445 \u0432\u0435\u0449\u0435\u0439, \u043d\u043e, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e. \u0412\u043e\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0438\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0430\u0433\u0435\u043d\u0442\u0430 Google Chrome.<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0-webkit-writing-mode: horizontal-tb !important; \u00a0\u00a0\u00a0\u00a0-webkit-appearance: button; \u00a0\u00a0\u00a0\u00a0border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186); \u00a0\u00a0\u00a0\u00a0border-style: solid; \u00a0\u00a0\u00a0\u00a0border-width: 1px; \u00a0\u00a0\u00a0\u00a0padding: 1px 7px 2px; \u00a0\u00a0\u00a0\u00a0text-rendering: auto; \u00a0\u00a0\u00a0\u00a0color: initial; \u00a0\u00a0\u00a0\u00a0display: inline-block; \u00a0\u00a0\u00a0\u00a0text-align: start; \u00a0\u00a0\u00a0\u00a0margin: 0em; \u00a0\u00a0\u00a0\u00a0font: 400 11px system-ui; }<\/code><\/pre>\n<p>  \u0410 \u0432\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430, \u043f\u0440\u0438 \u0432\u044b\u0432\u043e\u0434\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u0438\u043b\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d78\/51a\/1d6\/d7851a1d6cc1c392460cb5f8f6f91c65.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041f\u0440\u043e\u0441\u0442\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u044b \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438<\/font><\/i><\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>appearance<\/code>. \u041e\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u043d\u043e\u0439 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b. \u0412\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 \u0441\u0442\u0438\u043b\u044f\u0445, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0-webkit-appearance: none; \u00a0\u00a0\u00a0\u00a0\u00a0-moz-appearance: none; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0appearance: none; }<\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u0440\u043e\u0441\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>appearance<\/code>, \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/315\/d7f\/08f\/315d7f08fe5347aef7b640ec535aa199.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e appearance \u044d\u0442\u0438\u0445 \u043a\u043d\u043e\u043f\u043e\u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0432 none<\/font><\/i><\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0435\u0449\u0451 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u042d\u0442\u043e \u2014 <code>border<\/code>, <code>border-radius<\/code>, <code>background<\/code>.<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0-webkit-appearance: none; \u00a0\u00a0\u00a0\u00a0\u00a0-moz-appearance: none; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0appearance: none; \u00a0\u00a0border: 0; \u00a0\u00a0border-radius: 0; \u00a0\u00a0background: #ccc; }<\/code><\/pre>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/fc7\/a33\/d0c\/fc7a33d0c41a714466c4e154b69c801f.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041a\u043d\u043e\u043f\u043a\u0430 \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u0440\u043e\u0441\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/font><\/i><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u0431\u0440\u043e\u0441\u0438\u043b\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435. \u0410 \u0438\u043c\u0435\u043d\u043d\u043e, \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u0445, \u043f\u0440\u0435\u0434\u044a\u044f\u0432\u043b\u044f\u0435\u043c\u044b\u0445 \u043a \u0438\u0445 \u0434\u0438\u0437\u0430\u0439\u043d\u0443.<\/p>\n<h2><font color=\"#3AC1EF\">\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043a\u043d\u043e\u043f\u043e\u043a<\/font><\/h2>\n<p>  \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0432 \u043e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043a\u043d\u043e\u043f\u043e\u043a, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u0442\u0435\u043a\u0441\u0442. \u041d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0438\u0441\u0443\u043d\u043a\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u00ab\u0430\u043d\u0430\u0442\u043e\u043c\u0438\u044f\u00bb \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/371\/29b\/ecc\/37129becc54753351016429f269df7b4.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0426\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 (Text Color), \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 (Font Size), \u0444\u043e\u043d (Background), \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u043e\u0432 (Roundness), \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f (Padding)<\/font><\/i><\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0appearance: none; \u00a0\u00a0border: 0; \u00a0\u00a0border-radius: 5px; \u00a0\u00a0background: #4676D7; \u00a0\u00a0color: #fff; \u00a0\u00a0padding: 8px 16px; \u00a0\u00a0font-size: 16px; }<\/code><\/pre>\n<p>  \u0418\u043c\u0435\u044f \u0432\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0439 CSS-\u043a\u043e\u0434, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443, \u043f\u043e\u0445\u043e\u0436\u0443\u044e \u043d\u0430 \u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0440\u0438\u0441\u0443\u043d\u043a\u0435. \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u043a\u043d\u043e\u043f\u043a\u0438 \u0437\u0430\u0434\u0430\u043d, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e \u0432\u043d\u0435\u0448\u043d\u0435\u043c \u0432\u0438\u0434\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ce3\/810\/3ae\/ce38103ae04ed0cccd0eb7b15d025689.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041e\u0431\u044b\u0447\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 (Normal), \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0444\u043e\u043a\u0443\u0441\u0430 (Focus), \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u043c\u044b\u0448\u0438 (Hover), \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 (Disabled)<\/font><\/i><\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0421\u0442\u0438\u043b\u0438, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u043a \u043a\u043d\u043e\u043f\u043a\u0430\u043c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043d\u0438\u0445 \u043c\u044b\u0448\u0438 \u0438 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0438\u043c\u0438 \u0444\u043e\u043a\u0443\u0441\u0430<\/font><\/h3>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043d\u0430\u0432\u0435\u0434\u0451\u043d \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u0438, \u0432\u0430\u0436\u043d\u043e \u043e\u0441\u043d\u0430\u0441\u0442\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0441\u0442\u0438\u043b\u0435\u043c, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u043c \u043d\u0430 \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435. \u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0435\u0439 \u0444\u043e\u043a\u0443\u0441\u0430 \u0432 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0443.<\/p>\n<p>  <a href=\"https:\/\/bitsofco.de\/when-do-the-hover-focus-and-active-pseudo-classes-apply\/\">\u042d\u0442\u043e\u0442<\/a> \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432\u0430\u0436\u0435\u043d \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u043a \u043a\u043d\u043e\u043f\u043a\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043d\u0435\u0451 \u043c\u044b\u0448\u0438 (<code>hover<\/code>) \u0438 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0435\u0439 \u0444\u043e\u043a\u0443\u0441\u0430 (<code>focus<\/code>).<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0441\u0442\u0438\u043b\u044c <code>hover<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0434\u043e \u0441\u0442\u0438\u043b\u044f <code>focus<\/code>, \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u0438\u043b\u044c <code>focus<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0434\u043e \u0441\u0442\u0438\u043b\u044f <code>hover<\/code>. \u041a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0449\u0451\u043b\u043a\u0430\u044e\u0442 \u043c\u044b\u0448\u044c\u044e, \u0441\u0442\u0438\u043b\u044c <code>focus<\/code> \u043d\u0438\u043a\u0430\u043a \u0441\u0435\u0431\u044f \u043d\u0435 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u0435\u0442, \u0432\u0438\u0434\u0438\u043c\u044b\u043c \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c\u043e\u0435 \u0441\u0442\u0438\u043b\u0435\u043c <code>hover<\/code>.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/3e6\/706\/443\/3e6706443365e927e61766544d94a47c.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0425\u043e\u0440\u043e\u0448\u043e, \u0435\u0441\u043b\u0438 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0434\u0451\u0442 \u0441\u0442\u0438\u043b\u044c hover, \u0430 \u043f\u043e\u0442\u043e\u043c \u2014 \u0441\u0442\u0438\u043b\u044c focus<\/font><\/i><\/p>\n<p>  \u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439:<\/p>\n<pre><code class=\"css\">.c-button:hover { \u00a0\u00a0background: #1d49aa; }  .c-button:focus { \u00a0\u00a0outline: none; \u00a0\u00a0box-shadow: 0 0 0 4px #cbd6ee; }<\/code><\/pre>\n<p>  <\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438<\/font><\/h3>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043a\u043d\u043e\u043f\u043a\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430, \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u043c\u0435\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443. \u0412\u0430\u0436\u043d\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u0438 \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0434\u043b\u0438\u043d\u043d\u044b\u0435 \u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 \u043d\u0430\u0434\u043f\u0438\u0441\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0430\u0445. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 <code>min-width<\/code> \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043d\u043e\u043f\u043a\u0438. <a href=\"https:\/\/ishadeed.com\/article\/min-max-css\/\">\u0412\u043e\u0442<\/a> \u043c\u043e\u044f \u0441\u0442\u0430\u0442\u044c\u044f, \u0433\u0434\u0435 \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u044f\u0445 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p>  \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0438\u0441\u0443\u043d\u043e\u043a. \u0422\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043d\u043e\u043f\u043e\u043a, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0445 \u043d\u0430\u0434\u043f\u0438\u0441\u0438 \u0440\u0430\u0437\u043d\u043e\u0439 \u0434\u043b\u0438\u043d\u044b \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c \u0438 \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0430\u0445. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043d\u043e\u043f\u043a\u0438, \u043a\u043d\u043e\u043f\u043a\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043f\u0438\u0441\u044c \u043d\u0430 \u043d\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0439, \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439. \u041b\u0443\u0447\u0448\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>min-width<\/code>.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/64b\/d7a\/bdb\/64bd7abdb22522f1b92bca1c40a98ce7.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0421\u0442\u043e\u0438\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043d\u043e\u043f\u043e\u043a min-width<\/font><\/i><\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0min-width: 100px; \u00a0\u00a0\u00a0\u00a0\/* \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438*\/ }<\/code><\/pre>\n<p>  <\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b<\/font><\/h3>\n<p>  \u041f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0438\u0434\u0435\u044f, \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0430\u043c \u043d\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b. \u0412\u0435\u0434\u044c \u043a\u043d\u043e\u043f\u043a\u0438 \u0438\u043c\u0435\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u2014 \u043c\u0435\u0436\u0434\u0443 \u043a\u0440\u0430\u044f\u043c\u0438 \u043a\u043d\u043e\u043f\u043e\u043a \u0438 \u043d\u0430\u0434\u043f\u0438\u0441\u044f\u043c\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u043c\u0438\u0441\u044f \u043d\u0430 \u043d\u0438\u0445, \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u0435\u0441\u0442\u0430. \u0422\u0430\u043a? \u041d\u0435\u0442, \u043d\u0435 \u0442\u0430\u043a. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u044d\u0442\u043e\u0439 \u0438\u0434\u0435\u0438 \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f \u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043f\u0438\u0441\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<p>  \u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0438\u0441\u0443\u043d\u043e\u043a.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/619\/dd6\/372\/619dd63724876995ae4c0276f5635e86.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0430\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b<\/font><\/i><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0435 \u043d\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u043d\u0430\u0434\u043f\u0438\u0441\u044c, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u0430\u044f \u043d\u0430 \u043d\u0435\u0439, \u043c\u043e\u0436\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u043b\u0438\u0437\u043a\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u043a\u0440\u0430\u044f\u043c. \u0414\u0430\u0436\u0435 \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>min-width<\/code>. \u0412 \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0440\u0438\u0441\u0443\u043d\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>padding<\/code>, \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>min-width<\/code>. \u042d\u0442\u043e \u0434\u0430\u0451\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430 \u0434\u043b\u0438\u043d\u0430 \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u043e\u0439 \u043d\u0430 \u043d\u0435\u0439 \u043d\u0430\u0434\u043f\u0438\u0441\u0438.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0421\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u043e \u0448\u0440\u0438\u0444\u0442\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u0434\u043b\u044f \u043d\u0430\u0434\u043f\u0438\u0441\u0435\u0439, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0430\u0445<\/font><\/h3>\n<p>  \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0444\u043e\u0440\u043c, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u043e \u0448\u0440\u0438\u0444\u0442\u0430, \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c <code>&lt;html&gt;<\/code> \u0438\u043b\u0438 <code>&lt;body&gt;<\/code>. \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b 70% \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438 \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e, \u0432\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b \u0448\u0440\u0438\u0444\u0442 \u043a\u043d\u043e\u043f\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0439 \u0432 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445, \u0438, \u0432\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043d\u0438\u0447\u0435\u0433\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b.<\/p>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>font-family<\/code> \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>inherit<\/code>.<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0font-family: inherit; \u00a0\u00a0\u00a0\u00a0\/* \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ }<\/code><\/pre>\n<p>  <\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u044b\u0445 \u043a\u043d\u043e\u043f\u043e\u043a<\/font><\/h3>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0430, \u043a \u043d\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>disabled<\/code> \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 CSS.<\/p>\n<p>  \u0412\u043e\u0442 HTML-\u043a\u043e\u0434, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043e\u0442\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443:<\/p>\n<pre><code class=\"html\">&lt;button disabled&gt;&lt;\/button&gt;<\/code><\/pre>\n<p>  \u0412\u043e\u0442 CSS-\u043a\u043e\u0434 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n<pre><code class=\"css\">.c-button[disabled] { \u00a0\u00a0\u00a0\u00a0color: #d2d5db; \u00a0\u00a0\u00a0\u00a0background: #6c7589; \u00a0\u00a0\u00a0\u00a0cursor: not-allowed; }<\/code><\/pre>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0430, \u043e\u043d\u0430 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0444\u043e\u043a\u0443\u0441 \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0434\u0435\u0440\u0435\u0432\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0412\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u043c\u044b\u0448\u0438 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0435\u0433\u043e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443<\/font><\/h3>\n<p>  \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u0438, \u043d\u0430\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0439 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u0441\u0442\u0440\u0435\u043b\u043a\u0430. \u041c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f <a href=\"https:\/\/ux.stackexchange.com\/questions\/3788\/default-cursor-on-mouse-over-of-a-button-is-not-a-hand-pointer\">\u044d\u0442\u043e\u0442<\/a> \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 StackOverflow: \u00ab\u041a\u043d\u043e\u043f\u043a\u0438 \u2014 \u044d\u0442\u043e \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c. \u042d\u0442\u043e \u2014 \u0441\u0440\u0435\u0434\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u0432 \u0432\u0438\u0434\u0435 \u0440\u0443\u043a\u0438 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0434\u043e \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f \u044d\u0440\u044b \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430. \u041a\u043e\u0433\u0434\u0430 \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0441\u0442\u0430\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438 \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0432 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445\u00bb.<\/p>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043a\u0443\u0440\u0441\u043e\u0440-\u0441\u0442\u0440\u0435\u043b\u043a\u0443 \u043d\u0430 \u043a\u0443\u0440\u0441\u043e\u0440 \u0432 \u0432\u0438\u0434\u0435 \u0440\u0443\u043a\u0438.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/2bb\/488\/9b0\/2bb4889b0bd1a6ebf5a1c8d4ddb81613.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043a\u0443\u0440\u0441\u043e\u0440-\u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 \u043a\u0443\u0440\u0441\u043e\u0440 \u0432 \u0432\u0438\u0434\u0435 \u0440\u0443\u043a\u0438.<\/font><\/i><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043d\u043e\u043f\u043e\u043a, \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043c \u043f\u043e\u043b\u043d\u044b\u0439 CSS-\u043a\u043e\u0434, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439 \u0432 \u0441\u0435\u0431\u044f \u0432\u0441\u0451 \u0442\u043e, \u0447\u0435\u0433\u043e \u043c\u044b \u043a\u043e\u0441\u043d\u0443\u043b\u0438\u0441\u044c \u0432\u044b\u0448\u0435:<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0min-width: 100px; \u00a0\u00a0font-family: inherit; \u00a0\u00a0appearance: none; \u00a0\u00a0border: 0; \u00a0\u00a0border-radius: 5px; \u00a0\u00a0background: #4676d7; \u00a0\u00a0color: #fff; \u00a0\u00a0padding: 8px 16px; \u00a0\u00a0font-size: 1rem; \u00a0\u00a0cursor: pointer; }  .c-button:hover { \u00a0\u00a0background: #1d49aa; }  .c-button:focus { \u00a0\u00a0outline: none; \u00a0\u00a0box-shadow: 0 0 0 4px #cbd6ee; }<\/code><\/pre>\n<p>  \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u0445 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u044f\u0445 \u0438 \u0442\u0438\u043f\u0430\u0445 \u043a\u043d\u043e\u043f\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<h2><font color=\"#3AC1EF\">\u041a\u043d\u043e\u043f\u043a\u0438 \u0441\u043e \u0437\u043d\u0430\u0447\u043a\u043e\u043c<\/font><\/h2>\n<p>  \u0418\u043d\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435 \u0431\u044b\u043b \u0431\u044b \u043d\u0435\u043a\u0438\u0439 \u0437\u043d\u0430\u0447\u043e\u043a. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443, \u0438\u043b\u0438 \u0447\u0442\u043e\u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u043e\u0438\u043d\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043e \u0440\u043e\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0438. \u0412\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u043e \u0437\u043d\u0430\u0447\u043a\u0430\u043c\u0438 \u0431\u044b\u043b\u0438 \u0431\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/5b5\/b1c\/bb3\/5b5b1cbb3fcd47ce1f99a1301b1ca329.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043d\u043e\u043f\u043e\u043a \u0441\u043e \u0437\u043d\u0430\u0447\u043a\u0430\u043c\u0438<\/font><\/i><\/p>\n<p>  \u041d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u043e \u0437\u043d\u0430\u0447\u043a\u0430\u043c\u0438. \u041d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043a\u043e\u0434, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043a \u0437\u043d\u0430\u0447\u043a\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>aria-hidden<\/code>, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0431\u0440\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437 \u0434\u0435\u0440\u0435\u0432\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438. \u042f \u0442\u0430\u043a \u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>focusable=&quot;false&quot;<\/code> \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0437\u043d\u0430\u0447\u043e\u043a \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u043b \u0431\u044b \u0444\u043e\u043a\u0443\u0441 \u0432 IE.<\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u044f \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0441\u0442\u0438\u043b\u0435\u043c <code>vertical-align: middle<\/code> \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u043e\u043a \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438.<\/p>\n<p>  \u0412\u043e\u0442 HTML-\u043a\u043e\u0434 \u043a\u043d\u043e\u043f\u043a\u0438, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438\u0434\u0451\u0442 \u0440\u0435\u0447\u044c:<\/p>\n<pre><code class=\"html\">&lt;button class=&quot;c-button&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;!-- \u041a\u043e\u0434 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u043a\u0430 --&gt;&lt;\/svg&gt; \u00a0\u00a0\u00a0\u00a0Add to fav \u00a0\u00a0&lt;\/button&gt;<\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u043a\u043e\u0434 \u0441\u0442\u0438\u043b\u044f:<\/p>\n<pre><code class=\"css\">.c-button svg { \u00a0\u00a0\u00a0\u00a0display: inline-block; \u00a0\u00a0\u00a0\u00a0vertical-align: middle; \u00a0\u00a0\u00a0\u00a0fill: #fff; \u00a0\u00a0\u00a0\u00a0width: 20px; \u00a0\u00a0\u00a0\u00a0height: 20px; \u00a0\u00a0\u00a0\u00a0margin-right: 0.25rem; }<\/code><\/pre>\n<p>  \u0422\u043e, \u0447\u0442\u043e \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438, \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043c\u044b \u043d\u0435 \u0440\u0435\u0448\u0438\u043c \u0441\u043a\u0440\u044b\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0451 \u043a\u043d\u043e\u043f\u043a\u043e\u0439, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u043e\u043a. \u041a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c? \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430\u0434\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>span<\/code>. \u0417\u0430\u0442\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u043c \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u043a\u043d\u043e\u043f\u043a\u0438. \u0412\u043e\u0442 HTML-\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n<pre><code class=\"html\">&lt;button class=&quot;c-button c-button--icon&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;!-- \u041a\u043e\u0434 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u043a\u0430 --&gt;&lt;\/svg&gt; \u00a0\u00a0\u00a0\u00a0&lt;span&gt;Add to fav&lt;\/span&gt; \u00a0\u00a0&lt;\/button&gt;<\/code><\/pre>\n<p>  \u041c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u0440\u044b\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>span<\/code> \u0438 \u0434\u0435\u043b\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u043d\u043e:<\/p>\n<pre><code class=\"css\">.c-button--icon span { \u00a0\u00a0\u00a0\u00a0display: none; }<\/code><\/pre>\n<p>  \u0425\u043e\u0442\u044f \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442, \u0430 \u0437\u043d\u0430\u0447\u043e\u043a \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f, \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u043e \u0432 \u043f\u043b\u0430\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u041a\u043d\u043e\u043f\u043a\u0443 \u0443\u0436\u0435 \u00ab\u043d\u0435 \u0432\u0438\u0434\u044f\u0442\u00bb \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, VoiceOver \u0432 macOS \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u00abButton\u00bb, \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0435\u0439 \u043e \u043d\u0435\u0439. \u0423 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0439.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 SVG-\u0437\u043d\u0430\u0447\u043a\u043e\u0432<\/font><\/h3>\n<p>  \u042f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f SVG-\u0437\u043d\u0430\u0447\u043a\u0430\u043c\u0438. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0441\u0435 SVG-\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u043d\u0430\u0447\u043e\u043a \u0432 \u0442\u0435\u0433\u0435 <code>&lt;svg&gt;<\/code> \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;use&gt;<\/code>. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"html\">&lt;svg class=&quot;c-icon&quot; width=&quot;32&quot; height=&quot;32&quot; viewBox=&quot;0 0 20 20&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;use xlink:href=&quot;icons.svg#facebook&quot;&gt;&lt;\/use&gt; &lt;\/svg&gt;<\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043a\u043e\u0434 SVG-\u0437\u043d\u0430\u0447\u043a\u0430, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 <code>icons.svg<\/code> \u0438 \u0438\u043c\u0435\u0435\u0442 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>#facebook<\/code>. \u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043d\u0438\u0437\u0438\u0442\u044c \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u043e \u0437\u043d\u0430\u0447\u043a\u043e\u043c<\/font><\/h3>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u0442\u0435\u043a\u0441\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0432\u0438\u0434\u0435\u043d, \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0437\u0430\u0434\u0430\u043d\u043e CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>min-width<\/code>, \u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0437\u043d\u0430\u0447\u043a\u0430. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u0447\u0435\u0441\u0442\u044c \u044d\u0442\u0443 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c, \u043b\u0443\u0447\u0448\u0435 \u0432 \u044f\u0432\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u043e \u0437\u043d\u0430\u0447\u043a\u043e\u043c.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/3ae\/5ad\/289\/3ae5ad289709e45673ed8a8de35e2186.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041a\u043d\u043e\u043f\u043a\u0430, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0437\u0430\u0434\u0430\u043d\u043e CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e min-width, \u0438 \u043a\u043d\u043e\u043f\u043a\u0430, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u043e<\/font><\/i><\/p>\n<pre><code class=\"css\">.c-button--icon { \u00a0\u00a0min-width: initial; \u00a0\u00a0text-align: center; \u00a0\u00a0padding: 10px 14px; }<\/code><\/pre>\n<p>  <\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043a\u0440\u044b\u0442\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430<\/font><\/h3>\n<p>  \u042d\u043b\u0435\u043c\u0435\u043d\u0442, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 <code>.sr-only<\/code>, \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e, \u0443\u0431\u0440\u0430\u0432 \u0441 \u044d\u043a\u0440\u0430\u043d\u0430, \u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<p>  \u0412\u043e\u0442 HTML-\u043a\u043e\u0434:<\/p>\n<pre><code class=\"html\">&lt;button class=&quot;c-button c-button--icon&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;!-- \u041a\u043e\u0434 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u043a\u0430 --&gt;&lt;\/svg&gt; \u00a0\u00a0\u00a0\u00a0&lt;span class=&quot;sr-only&quot;&gt;Add to fav&lt;\/span&gt; \u00a0\u00a0&lt;\/button&gt;<\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">.sr-only { \u00a0\u00a0border: 0;\u00a0 \u00a0\u00a0clip: rect(0 0 0 0);\u00a0 \u00a0\u00a0-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px); \u00a0\u00a0clip-path: polygon(0px 0px, 0px 0px, 0px 0px); \u00a0\u00a0height: 1px;\u00a0 \u00a0\u00a0margin: -1px; \u00a0\u00a0overflow: hidden; \u00a0\u00a0padding: 0; \u00a0\u00a0position: absolute; \u00a0\u00a0width: 1px; \u00a0\u00a0white-space: nowrap; }<\/code><\/pre>\n<p>  <\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u0432 0<\/font><\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>font-size<\/code> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>0<\/code>, \u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>span<\/code> \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0422\u043e \u0435\u0441\u0442\u044c \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0440\u044b\u0442.<\/p>\n<pre><code class=\"css\">.c-button--icon span { \u00a0\u00a0\u00a0\u00a0font-size: 0; }<\/code><\/pre>\n<p>  \u041d\u043e \u0442\u0443\u0442 \u044f \u0441\u043a\u043b\u043e\u043d\u044f\u044e\u0441\u044c \u043a \u0440\u0435\u0448\u0435\u043d\u0438\u044e, \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0449\u0435\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 <code>.sr-only<\/code>. \u0421 \u043c\u043e\u0435\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043e\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0431\u043e\u043b\u0435\u0435 \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c. \u041f\u0440\u0438\u0451\u043c \u0441\u043a\u0440\u044b\u0442\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u0443\u0442\u0451\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u0432 0, \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u043d\u0435\u043a\u0438\u0439 \u0445\u0430\u043a.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 aria-label<\/font><\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0432 \u043a\u043d\u043e\u043f\u043a\u0435 \u043d\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;span&gt;<\/code>, \u0442\u043e\u0433\u0434\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0438 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e. \u041e\u0434\u0438\u043d \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>aria-label<\/code>.\u00a0 \u0410\u0442\u0440\u0438\u0431\u0443\u0442 \u043b\u0438\u0431\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u0441\u0430\u043c\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 <code>&lt;button&gt;<\/code>, \u043b\u0438\u0431\u043e \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 <code>&lt;svg&gt;<\/code>.<\/p>\n<pre><code class=\"html\">&lt;button class=&quot;c-button c-button--icon&quot; aria-label=&quot;Add to fav&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;!-- \u041a\u043e\u0434 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u043a\u0430 --&gt;&lt;\/svg&gt; \u00a0\u00a0&lt;\/button&gt;<\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u043e \u043a\u043d\u043e\u043f\u043a\u0430\u0445 \u0441\u043e \u0437\u043d\u0430\u0447\u043a\u0430\u043c\u0438 \u2014 \u0432\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 <a href=\"https:\/\/www.sarasoueidan.com\/blog\/accessible-icon-buttons\/\">\u044d\u0442\u043e\u0442<\/a> \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b.<\/p>\n<h2><font color=\"#3AC1EF\">\u041a\u043d\u043e\u043f\u043a\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u0442\u0435\u043a\u0441\u0442\u0430<\/font><\/h2>\n<p>  \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0430 \u0431\u044b \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0430. \u041d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/728\/863\/acd\/728863acd5747e164bc1636ce21b712f.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041a\u043d\u043e\u043f\u043a\u0430, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0430\u044f \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0430<\/font><\/i><\/p>\n<p>  \u0422\u0443\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0430\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442. \u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u043e \u0435\u0451 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043b\u044e\u0434\u0435\u0439 \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438? \u0412\u043e\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 HTML-\u043a\u043e\u0434:<\/p>\n<pre><code class=\"html\">&lt;button class=&quot;c-button&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;span&gt;Subscribe to our newsletter&lt;\/span&gt; \u00a0\u00a0\u00a0\u00a0&lt;span&gt;240K+ subscribers&lt;\/span&gt; &lt;\/button&gt;<\/code><\/pre>\n<p>  \u0421\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430 \u00ab\u043e\u0437\u0432\u0443\u0447\u0438\u0442\u00bb \u044d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0443 \u043a\u0430\u043a \u00abSubscribe to our newsletter 240K+ subscribers\u00bb. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u044d\u0442\u043e \u0443\u0441\u043b\u044b\u0448\u0438\u0442, \u044d\u0442\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0443\u0442\u0430\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0438\u0447\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0430, \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435. \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 Chrome \u0434\u043b\u044f \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/68a\/1b4\/465\/68a1b4465f36200eeb3091667ba2c120.jpg\"><\/div>\n<p>  <i><font color=\"#999999\">\u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 Chrome<\/font><\/i><\/p>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0443\u0442\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u044f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0451\u043b \u0431\u044b \u0441\u043a\u0440\u044b\u0442\u044c \u0432\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0442\u0435\u043a\u0441\u0442\u0430 \u043e\u0442 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430. \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>aria-hidden<\/code> \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <code>&lt;span&gt;<\/code>:<\/p>\n<pre><code class=\"html\">&lt;button class=&quot;c-button&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;span&gt;Subscribe to our newsletter&lt;\/span&gt; \u00a0\u00a0\u00a0\u00a0&lt;span aria-hidden=&quot;true&quot;&gt;240K+ subscribers&lt;\/span&gt; &lt;\/button&gt;<\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043d\u0435\u043b\u044c\u0437\u044f, \u0435\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043c\u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c, \u044f \u043d\u0430\u0448\u0451\u043b \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 Smashing Magazine. \u041e\u043d\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435, \u043f\u043e\u043b\u044c\u0437\u0443\u044f\u0441\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043b\u0438\u0448\u043d\u0435\u0433\u043e. \u0412\u043e\u0442 CSS-\u043a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"css\">.c-button--multiple span:after { \u00a0\u00a0\u00a0\u00a0content: &quot;240K+ subscribers&quot;; \u00a0\u00a0\u00a0\u00a0display: block; \u00a0\u00a0\u00a0\u00a0font-weight: 400; \u00a0\u00a0\u00a0\u00a0margin-top: 0.25rem; }<\/code><\/pre>\n<p>  <\/p>\n<h2><font color=\"#3AC1EF\">\u0421\u0441\u044b\u043b\u043a\u0438 (&lt;a&gt;) \u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 (&lt;button&gt;)?<\/font><\/h2>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438, \u0430 \u043a\u043e\u0433\u0434\u0430 \u2014 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438? \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u0447\u0435\u043c \u043e\u043d\u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0421\u0441\u044b\u043b\u043a\u0438<\/font><\/h3>\n<p>  \u0422\u0435\u0433 <code>&lt;a&gt;<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0433\u0438\u043f\u0435\u0440\u0441\u0441\u044b\u043b\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c. \u0421\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u0442\u0435\u0433\u043e\u043c <code>&lt;a&gt;<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u0430: <code>:hover<\/code>, <code>:focus<\/code>, <code>:active<\/code> \u0438 <code>:visited<\/code>. \u0415\u0441\u043b\u0438 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438, \u0442\u043e \u043d\u0430\u0434\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0443 <code>Enter<\/code> \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435. \u0421\u0441\u044b\u043b\u043a\u0438 \u00ab\u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u044e\u0442\u00bb \u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u041a\u043d\u043e\u043f\u043a\u0438<\/font><\/h3>\n<p>  \u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button type=&quot;button&quot;&gt;<\/code> \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435, \u0431\u0435\u0437 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u043d\u0435\u043c\u0443 JavaScript-\u043a\u043e\u0434\u0430, \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u0421 \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b <code>:hover<\/code>, <code>:focus<\/code> \u0438 <code>:active<\/code>. \u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438, \u0442\u043e \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043d\u044b\u0445 \u043a\u043b\u0430\u0432\u0438\u0448 <code>Enter<\/code> \u0438 <code>\u041f\u0440\u043e\u0431\u0435\u043b<\/code>. \u0421\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430 \u00ab\u0447\u0438\u0442\u0430\u044e\u0442\u00bb \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043d\u043e\u043f\u043e\u043a.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435, \u0442\u043e \u0441\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a, \u0447\u0442\u043e \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u0441\u0442\u0438\u043b\u044f, \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0432 \u043f\u043b\u0430\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u0434\u043b\u044f \u0438\u0445 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f HTML-\u043a\u043e\u0434\u0430. \u0421 \u0443\u0447\u0451\u0442\u043e\u043c \u044d\u0442\u043e\u0433\u043e CSS-\u043a\u043e\u0434 \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 <code>.c-button<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>&lt;button&gt;<\/code>, \u0438 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>&lt;a&gt;<\/code>. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/f63\/69d\/578\/f6369d578d0c25a8e9faa2e6ac878665.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u043a\u043d\u043e\u043f\u043e\u043a<\/font><\/i><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u00ab\u043a\u043d\u043e\u043f\u043a\u0438\u00bb \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0438\u0437 \u043d\u0438\u0445 \u2014 \u044d\u0442\u043e, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;a&gt;<\/code>, \u0430 \u0432\u0442\u043e\u0440\u0430\u044f \u2014 \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code>. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 HTML \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code>.<\/p>\n<p>  \u0422\u0443\u0442 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0434\u0432\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a \u0441\u0442\u0438\u043b\u044e <code>.c-button<\/code>. \u042d\u0442\u043e \u2014 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>text-decoration: none;<\/code> \u0438 <code>text-align: center;<\/code>. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0442\u0435\u043a\u0441\u0442 \u0441\u0441\u044b\u043b\u043e\u043a \u043f\u043e\u0434\u0447\u0451\u0440\u043a\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0430\u043c \u0432\u0430\u0436\u043d\u043e \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043e\u0442 <code>&lt;button&gt;<\/code>.<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0\/* \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ \u00a0\u00a0\u00a0\u00a0\/* \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043e\u043a *\/ \u00a0\u00a0\u00a0\u00a0text-decoration: none; \u00a0\u00a0\u00a0\u00a0text-align: center; }<\/code><\/pre>\n<p>  <\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u042d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;button&gt; \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a \u043a\u043d\u043e\u043f\u043a\u0430<\/font><\/h3>\n<p>  \u041c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f <a href=\"https:\/\/scottaohara.github.io\/a11y_accordions\/\">\u044d\u0442\u043e\u0442<\/a> \u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c, \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u044c-\u00ab\u0430\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d\u00bb. \u0412\u043d\u0430\u0447\u0430\u043b\u0435, \u0435\u0441\u043b\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e JavaScript \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/c64\/59e\/9f8\/c6459e9f805c55569083e3d1a83788b7.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 JavaScript<\/font><\/i><\/p>\n<p>  \u0412\u043e\u0442 HTML-\u043a\u043e\u0434 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u0442\u0430\u043a\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;accordion&quot; data-aria-accordion&gt; \u00a0\u00a0&lt;h2 data-aria-accordion-heading&gt;Heading of my panel&lt;\/font&gt;&lt;\/h2&gt; \u00a0\u00a0&lt;div data-aria-accordion-panel&gt; \u00a0\u00a0\u00a0\u00a0&lt;p&gt;Content goes here&lt;\/p&gt; \u00a0\u00a0&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 JavaScript \u0432\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f. \u0414\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043f\u0443\u0442\u0451\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0435\u0451 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;h2&gt;<\/code>.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/0de\/242\/348\/0de2423480e73c935c777ca80d105bee.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 JavaScript-\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430<\/font><\/i><\/p>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;button&gt;<\/code> \u2014 \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440, \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u043d\u043e\u043f\u043a\u0430 \u0440\u0435\u0448\u0430\u0435\u0442 \u0437\u0430\u0434\u0430\u0447\u0443 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0438 \u0441\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u043e\u0432 \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u041a\u043d\u043e\u043f\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/font><\/h3>\n<p>  \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043d\u0435\u043a\u0438\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442. \u041d\u0430\u043c \u043d\u0430\u0434\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u0434\u043b\u044f \u0435\u0433\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u041a\u0430\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438? \u0422\u0443\u0442 \u043d\u0430\u043c \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0434\u0451\u0442 \u0441\u0441\u044b\u043b\u043a\u0430! \u0415\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a \u0441\u0441\u044b\u043b\u043a\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>download<\/code>, \u043f\u0440\u0438 \u0449\u0435\u043b\u0447\u043a\u0435 \u043d\u0430 \u043d\u0435\u0451 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/1bd\/87c\/442\/1bd87c442ae668bc52986900ae8f8d53.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u043d\u0430\u044f \u043a\u0430\u043a \u043a\u043d\u043e\u043f\u043a\u0430<\/font><\/i><\/p>\n<p>  \u0412\u043e\u0442 \u043a\u043e\u0434 \u044d\u0442\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0438:<\/p>\n<pre><code class=\"html\">&lt;a href=&quot;rtl-101.pdf&quot; download&gt;Download PDF&lt;\/a&gt;<\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0432 \u043d\u0430\u0448\u0435\u043c \u0440\u0430\u0441\u043f\u043e\u0440\u044f\u0436\u0435\u043d\u0438\u0438 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0430, \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043a\u0430\u043a \u043a\u043d\u043e\u043f\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0432\u043e\u0451 \u0434\u0435\u043b\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043b\u0438\u0448\u044c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b HTML.<\/p>\n<h2><font color=\"#3AC1EF\">\u041a\u043d\u043e\u043f\u043a\u0438 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439<\/font><\/h2>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/67e\/863\/1ae\/67e8631aee3e2e622e9c52763b04baa2.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041e\u0431\u044b\u0447\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043d\u0435\u0451 \u043c\u044b\u0448\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439<\/font><\/i><\/p>\n<p>  \u041d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0440\u0438\u0441\u0443\u043d\u043a\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043d\u0435\u0451 \u043c\u044b\u0448\u0438. \u041a\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u043a\u043d\u043e\u043f\u043a\u0438? \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0441\u0442\u0438\u043b\u044c \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>border<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0446\u0432\u0435\u0442. \u041f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u0432 \u0442\u0430\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043d\u0435\u0451 \u043c\u044b\u0448\u0438, \u043d\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0431\u044b.<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0border: 2px solid transparent; \u00a0\u00a0\u00a0\u00a0\/* \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ }  .c-button:hover { \u00a0\u00a0\u00a0\u00a0background: transparent; \u00a0\u00a0\u00a0\u00a0color: #222; \u00a0\u00a0\u00a0\u00a0border-color: #4676d7; }<\/code><\/pre>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u0430\u043a\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0443 \u0432 \u043d\u0430\u0448\u0435\u043c \u0440\u0430\u0441\u043f\u043e\u0440\u044f\u0436\u0435\u043d\u0438\u0438 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430, \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u0442\u043e\u0440\u043e\u0439, \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043d\u0435\u0451 \u043c\u044b\u0448\u0438, \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u0435\u0451 \u0433\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0444\u043e\u043d \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c.<\/p>\n<h2><font color=\"#3AC1EF\">\u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438<\/font><\/h2>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043d\u0430\u0434 <a href=\"https:\/\/ishadeed.com\/article\/learn-css-positioning\/\">\u0441\u0442\u0430\u0442\u044c\u0451\u0439<\/a> \u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043c\u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0430\u0441\u044c \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u044b\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>  \u041c\u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u0447\u0442\u043e, \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0440\u0438\u0441\u0443\u043d\u043a\u0443.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/c49\/5df\/d57\/c495dfd572b9ad4c402a8a11d7c56976.jpg\"><\/div>\n<p>  <i><font color=\"#999999\">\u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0438 \u0435\u0451 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439<\/font><\/i><\/p>\n<p>  \u0422\u0443\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u2014 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0438 \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u043a\u043d\u043e\u043f\u043a\u0438, \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e, \u0447\u0442\u043e\u0431\u044b \u0443 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 (\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u043e\u0439) \u043a\u043d\u043e\u043f\u043a\u0438 \u0438\u043c\u0435\u043b\u0430\u0441\u044c \u0431\u044b \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430. \u042d\u0442\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439.<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display: inline-block; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: #fff; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background: linear-gradient(to bottom, #00acee, #0072e0); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font-size: 18px; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font-weight: 500; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 12px 26px; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0border-radius: 100px; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* \u041f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u0430\u044f \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0442\u043e\u0439 \u0436\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439 *\/ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0border: 3px solid transparent; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text-decoration: none; }  .c-button--outline { \u00a0\u00a0background: transparent; \u00a0\u00a0color: var(--color-brand-primary); \u00a0\u00a0border-color: var(--color-brand-primary); }<\/code><\/pre>\n<p>  \u0422\u0443\u0442 \u0432\u0441\u0451, \u0432\u0440\u043e\u0434\u0435 \u0431\u044b, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0440\u0430\u0437\u0443\u043c\u043d\u043e, \u043d\u043e \u0432 \u0445\u043e\u0434\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439. \u042f \u0434\u0430\u0436\u0435 \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0440\u0435\u0448\u0438\u0442\u044c \u0435\u0451, <a href=\"https:\/\/twitter.com\/shadeed9\/status\/1223227197357424640\">\u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0432<\/a> \u043f\u043e\u043c\u043e\u0449\u0438 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Twitter. \u042d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0438\u0441\u0443\u043d\u043a\u0435.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ed9\/cf7\/c9e\/ed9cf7c9e26d018d438e85ba7a09efae.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041e\u0431\u044b\u0447\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430, \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c (\u0433\u0440\u0430\u043d\u0438\u0446\u0430, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u0430\u044f; \u0446\u0432\u0435\u0442\u043e\u043c \u043e\u043d\u0430 \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u0430 \u043b\u0438\u0448\u044c \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438), \u043a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u043c\u0438 \u043a\u0440\u0430\u044f\u043c\u0438<\/font><\/i><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435\u0439, \u043f\u043e\u0437\u0432\u043e\u043b\u044c\u0442\u0435 \u043c\u043d\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u0445 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>background-origin<\/code>, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0435\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0440\u0438\u0441\u0443\u043d\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>padding-box<\/code>. \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0440\u0430\u0437\u043c\u0435\u0440 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0431\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0442\u043e\u043b\u0449\u0438\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  \u042f \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a \u043a\u043d\u043e\u043f\u043a\u0435 \u0448\u0438\u0440\u043e\u043a\u0443\u044e \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0437\u0430 \u0442\u0435\u043c, \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442, \u0438 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 <code>padding<\/code> \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/1bb\/d12\/01f\/1bbd1201fe9295a028055d05bb26c0d6.jpg\"><\/div>\n<p>  <i><font color=\"#999999\">\u041a\u043d\u043e\u043f\u043a\u0430 \u0441 \u0448\u0438\u0440\u043e\u043a\u0438\u043c\u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u0438 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442<\/font><\/i><\/p>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0440\u0438\u0441\u0443\u043d\u043a\u0430 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0441\u044c \u0441\u0442\u0438\u043b\u0435\u043c <code>background-origin: border-box;<\/code>, \u0438\u0437\u043c\u0435\u043d\u0438\u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>padding-box<\/code> \u043d\u0430 <code>border-box<\/code>:<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background-origin: border-box; }<\/code><\/pre>\n<p>  <a href=\"https:\/\/codepen.io\/shadeed\/pen\/fef34bd75ac735441a1003081b2d313f?editors=0100\">\u0412\u043e\u0442<\/a>, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 CodePen.<\/p>\n<h2><font color=\"#3AC1EF\">\u0427\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u2014 height \u0438\u043b\u0438 padding?<\/font><\/h2>\n<p>  \u0423 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u0435\u0441\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0430. \u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u043e\u0436\u043d\u043e, \u043b\u0438\u0431\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u044f \u0432 \u044f\u0432\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0435\u0451 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>height<\/code>, \u043b\u0438\u0431\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>padding<\/code> \u0434\u043b\u044f \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0438 \u043d\u0438\u0436\u043d\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d \u043a\u043d\u043e\u043f\u043a\u0438. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043d\u0438\u0436\u0435, \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u043d\u044b, \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c, \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>&lt;a&gt;<\/code>.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0424\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430<\/font><\/h3>\n<p>  \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430, \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0\/* \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ \u00a0\u00a0\u00a0\u00a0min-width: 120px; \u00a0\u00a0\u00a0\u00a0height: 45px; }<\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0442\u0435\u043a\u0441\u0442 \u043d\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u0441\u0451 \u044d\u0442\u043e \u0442\u0430\u043a, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/dea\/e2c\/61f\/deae2c61f878191cf5b96cdd9657e2ba.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041a\u043d\u043e\u043f\u043a\u0430, \u0442\u0435\u043a\u0441\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0435 \u0432\u044b\u0440\u043e\u0432\u043d\u0435\u043d \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443<\/font><\/i><\/p>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0438 \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u043c\u043e\u0436\u043d\u043e \u043b\u0438\u0431\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>padding<\/code>, \u043b\u0438\u0431\u043e \u2014 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>line-height<\/code>. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044f <code>line-height<\/code> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0440\u0430\u0432\u043d\u043e\u0435 \u0438\u043b\u0438 \u0431\u043b\u0438\u0437\u043a\u043e\u0435 \u043a \u0432\u044b\u0441\u043e\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443.<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0\/* \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ \u00a0\u00a0\u00a0\u00a0min-width: 120px; \u00a0\u00a0\u00a0\u00a0height: 45px; \u00a0\u00a0\u00a0\u00a0line-height: 45px; }<\/code><\/pre>\n<p>  \u041d\u043e \u0443 \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0435\u0441\u0442\u044c \u043c\u0438\u043d\u0443\u0441\u044b:<\/p>\n<ul>\n<li>\u041d\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u0442\u0435\u043a\u0441\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0432\u044b\u0440\u043e\u0432\u043d\u0435\u043d \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443. \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0448\u0440\u0438\u0444\u0442\u0430 \u0435\u0433\u043e \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u043e.<\/li>\n<li>\u041f\u0440\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0437\u0430\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>font-size<\/code>, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>line-height<\/code>.<\/li>\n<li>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>line-height <\/code>\u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432, \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u044b\u0445 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445. \u042d\u0442\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u0434\u0432\u0443\u043c\u044f \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u2014 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442.<\/li>\n<\/ul>\n<p>  <\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f<\/font><\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 <code>padding-top<\/code> \u0438 <code>padding-bottom<\/code>, \u0442\u043e \u043e\u0436\u0438\u0434\u0430\u044e\u0442, \u0447\u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0440\u043e\u0432\u043d\u0435\u043d\u043e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443. \u0422\u0430\u043a \u043e\u043d\u043e \u0438 \u0435\u0441\u0442\u044c? \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438.<\/p>\n<p>  \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0448\u0440\u0438\u0444\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0446\u0435\u043d\u0442\u0440\u0443\u044e\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e. \u0410 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u0438\u043d\u0430\u0447\u0435. \u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u0446\u0435\u043b\u0438 \u043e\u0434\u043d\u043e \u0438\u0437 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c. \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/770\/cce\/c76\/770ccec768b4b3d5108b8482cadd69e0.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u0446\u0435\u043d\u0442\u0440\u043e\u0432\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438<\/font><\/i><\/p>\n<p>  \u0412\u043e\u0442 CSS-\u043a\u043e\u0434 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0\/* \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ \u00a0\u00a0\u00a0\u00a0min-width: 120px; \u00a0\u00a0\u00a0\u00a0padding: 16px 14px; }<\/code><\/pre>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0433\u043a\u0430 \u0441\u043c\u0435\u0449\u0451\u043d\u043d\u044b\u043c. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c:<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0\/* \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ \u00a0\u00a0\u00a0\u00a0min-width: 120px; \u00a0\u00a0\u00a0\u00a0padding: 14px 14px 16px 14px; \/* \u0412\u0435\u0440\u0445, \u043f\u0440\u0430\u0432\u0430\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u0430, \u043d\u0438\u0437, \u043b\u0435\u0432\u0430\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u0430 *\/ }<\/code><\/pre>\n<p>  <\/p>\n<h2><font color=\"#3AC1EF\">\u041e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0442\u0435\u0433 &lt;span&gt;<\/font><\/h2>\n<p>  \u0412 \u0445\u043e\u0434\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u044f \u0432\u044b\u044f\u0441\u043d\u0438\u043b, \u0447\u0442\u043e \u0446\u0435\u043d\u0442\u0440\u043e\u0432\u043a\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u043a\u043d\u043e\u043f\u043e\u043a Adobe \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0431\u0438\u0442\u0430. \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/afb\/579\/2a3\/afb5792a3c3a469de27b8fa697e339bc.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0426\u0435\u043d\u0442\u0440\u043e\u0432\u043a\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0431\u0438\u0442\u0430<\/font><\/i><\/p>\n<p>  \u042f \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b \u044d\u0442\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u043b \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d. \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043e\u0431\u0451\u0440\u043d\u0443\u0442\u043e \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;span&gt;<\/code> \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<pre><code class=\"html\">&lt;button class=&quot;c-button-adobe&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;span&gt;Save Changes&lt;\/span&gt; &lt;\/button&gt;<\/code><\/pre>\n<p>  \u0414\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;button&gt;<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;span&gt;<\/code>, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b\u0441\u043e\u0442\u0430 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>padding<\/code> \u0438\u043b\u0438 \u0447\u0435\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0435\u0449\u0451. \u0412\u043e\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/f9e\/faf\/48e\/f9efaf48ebba06c975590b0ec1a28e33.gif\"><\/div>\n<p>  <i><font color=\"#999999\">\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u044b\u0441\u043e\u0442\u044b \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0435\u0451 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e<\/font><\/i><\/p>\n<p>  \u041f\u0440\u0430\u0432\u0434\u0430, \u0435\u0441\u043b\u0438 \u0440\u0435\u0447\u044c \u0438\u0434\u0451\u0442 \u043e \u0441\u0441\u044b\u043b\u043a\u0435, \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0449\u0435\u0439 \u043a\u0430\u043a \u043a\u043d\u043e\u043f\u043a\u0430, \u0442\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;span&gt;<\/code> \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u0447\u0435\u0441\u0442\u044c \u044d\u0442\u0443 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>flexbox<\/code>.<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0\/* \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ \u00a0\u00a0\u00a0\u00a0display: inline-flex; *To keep the button inline, and flex container at the same time* \u00a0\u00a0\u00a0\u00a0align-items: center; \u00a0\u00a0\u00a0\u00a0justify-content: center; }<\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0438 \u0432\u0441\u0451. \u0425\u043e\u0447\u0443 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u043c\u043d\u0435 \u043f\u043e\u043c\u043e\u0433\u043b\u0430 <a href=\"https:\/\/medium.com\/@PavelLaptev\/my-ideal-button-13db014e1c8d\">\u044d\u0442\u0430<\/a> \u0441\u0442\u0430\u0442\u044c\u044f.<\/p>\n<h2><font color=\"#3AC1EF\">\u041a\u043d\u043e\u043f\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 flexbox- \u0438\u043b\u0438 grid-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432<\/font><\/h2>\n<p>  \u0422\u0443\u0442 \u0443 \u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0435 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438\u043c\u0435\u044e\u0442 \u043a flex- \u0438 grid-\u043c\u0430\u043a\u0435\u0442\u0430\u043c. \u041f\u043e\u0437\u0432\u043e\u043b\u044c\u0442\u0435 \u043c\u043d\u0435 \u043f\u0440\u043e\u044f\u0441\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441.<\/p>\n<p>  \u042f \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043d\u0430\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u043c \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b flex-\u043c\u0430\u043a\u0435\u0442:<\/p>\n<pre><code class=\"css\">.c-hero { \u00a0\u00a0\u00a0\u00a0display: flex; \u00a0\u00a0\u00a0\u00a0flex-direction: column; \u00a0\u00a0\u00a0\u00a0justify-content: center; }<\/code><\/pre>\n<p>  \u0422\u043e, \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u043c\u0435\u043d\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0434\u0438\u0432\u0438\u043b\u043e.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/afd\/09e\/b74\/afd09eb7412b0fc67ca01a4addb0136d.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f flex-\u043c\u0430\u043a\u0435\u0442\u0430<\/font><\/i><\/p>\n<p>  \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u0430\u0436\u0434\u044b\u0439 flex-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0448\u0438\u0440\u0438\u043d\u044b \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0440\u0438\u0441\u0443\u043d\u043a\u0435. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u044d\u0442\u043e\u0439 \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0441\u0442\u0438, \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>align-self<\/code>:<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0\/* \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ \u00a0\u00a0\u00a0\u00a0align-self: flex-start; }<\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u043a\u0430\u043a \u043a\u043d\u043e\u043f\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/8c7\/922\/977\/8c79229778242e8b009cda5ae012f244.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041a\u043d\u043e\u043f\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0435<\/font><\/i><\/p>\n<p>  \u0415\u0449\u0451 \u043e\u0434\u043d\u0430 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0430 \u0432\u043e flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0437\u0430\u0434\u0430\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>flex-direction: row<\/code>. \u0412\u044b\u0441\u043e\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043e\u0433\u043d\u0430\u043d\u0430 \u043f\u043e\u0434 \u0432\u044b\u0441\u043e\u0442\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043d\u043e\u043f\u043a\u0438 <code>align-self<\/code> \u0438\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 <code>align-items<\/code>.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/da0\/c44\/4c4\/da0c444c4844c1e540aa2b92da7135ca.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041a\u043d\u043e\u043f\u043a\u0430, \u0440\u0430\u0441\u0442\u044f\u043d\u0443\u0442\u0430\u044f \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435<\/font><\/i><\/p>\n<p>  \u0412\u043e\u0442 CSS-\u043a\u043e\u0434:<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\u00a0\u00a0align-self: center; }<\/code><\/pre>\n<p>  \u0417\u0430\u0434\u0430\u0432\u0430\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0446\u0435\u043d\u0442\u0440\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043c\u044b \u0440\u0435\u0448\u0430\u0435\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. \u0412\u043e\u0442 \u043a\u0430\u043a \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u043e\u0442 \u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/b5e\/932\/f55\/b5e932f55ae4e7dcf6a93601766c10c0.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0440\u0430\u0441\u0442\u044f\u043d\u0443\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438<\/font><\/i><\/p>\n<h2><font color=\"#3AC1EF\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f em<\/font><\/h2>\n<p>  \u0415\u0434\u0438\u043d\u0438\u0446\u0443 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f <code>em<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043d\u043e\u043f\u043e\u043a. \u042d\u0442\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0432 \u0442\u0430\u043a\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u0430. \u0415\u0434\u0438\u043d\u0438\u0446\u0430 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f <code>em<\/code> \u0440\u0430\u0432\u043d\u0430 <code>font-size<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (<code>px<\/code> \u0438\u043b\u0438 <code>rem<\/code>). \u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"css\">.element { \u00a0\u00a0\u00a0\u00a0font-size: 16px; \u00a0\u00a0\u00a0\u00a0padding: 0.5em; }<\/code><\/pre>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 padding \u0440\u0430\u0432\u043d\u043e <code>16 * 0.5 px<\/code>.<\/p>\n<p>  \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0442\u0440\u0451\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432: \u043e\u0431\u044b\u0447\u043d\u044b\u0435, \u0441\u0440\u0435\u0434\u043d\u0438\u0435, \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0435. \u041a\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 <code>padding<\/code>, <code>width<\/code>, <code>height<\/code>, <code>margin<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f <code>em<\/code>, \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438, \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u043c\u0435\u043d\u044f\u0442\u044c. \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/1fb\/4ee\/f6a\/1fb4eef6aaa60ea710b6adb0a324f79a.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041a\u043d\u043e\u043f\u043a\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432<\/font><\/i><\/p>\n<p>  \u0410 \u0432\u043e\u0442 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b CSS-\u043a\u043e\u0434\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f <code>em<\/code>:<\/p>\n<pre><code class=\"css\">.c-button { \u00a0\u00a0\/* \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ \u00a0\u00a0font-size: 1rem; \u00a0\u00a0min-width: 6.25em; \u00a0\u00a0border-radius: 0.3125em; \u00a0\u00a0padding: 0.625em 1em; }  .c-button svg { \u00a0\u00a0width: 1.25em; \u00a0\u00a0height: 1.25em; \u00a0\u00a0margin-right: 0.25em; }<\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430:<\/p>\n<pre><code class=\"css\">.c-button--md { \u00a0\u00a0font-size: 22px; }  .c-button--lg { \u00a0\u00a0font-size: 30px; }<\/code><\/pre>\n<p>  \u2192 <a href=\"https:\/\/codepen.io\/shadeed\/pen\/2bb3bfd4b73dda466b3ce9d693fe7ccb\">\u0412\u043e\u0442<\/a> \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043a\u043d\u043e\u043f\u043e\u043a \u043d\u0430 CodePen<\/p>\n<p>  \u2192 <a href=\"https:\/\/css-tricks.com\/building-resizeable-components-relative-css-units\/\">\u0412\u043e\u0442<\/a> \u043c\u043e\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0441 \u043d\u0435\u0439 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f<\/p>\n<h2><font color=\"#3AC1EF\">\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b<\/font><\/h2>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u0440\u0438\u044f\u0442\u043d\u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0431\u044b \u043d\u0435\u043a\u0438\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434. \u041f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0432 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0444\u043e\u043d\u0430. <a href=\"https:\/\/codepen.io\/shadeed\/pen\/2f374503e62551b70a6251ebbb5d5692\">\u0412\u043e\u0442<\/a> \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 CodePen, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u044d\u0442\u043e\u0439 \u0438\u0434\u0435\u0438.<\/p>\n<h2><font color=\"#3AC1EF\">\u0418\u0442\u043e\u0433\u0438<\/font><\/h2>\n<p>  \u041c\u043d\u0435 \u0431\u044b\u043b\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u044f\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0434 \u044d\u0442\u0438\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u043c. \u0415\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0437\u0430\u043d\u044f\u043b\u043e \u0443 \u043c\u0435\u043d\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0433\u043e\u0434\u0430. \u042f \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u043d, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u044b \u043d\u0430\u0448\u043b\u0438 \u0437\u0434\u0435\u0441\u044c \u0447\u0442\u043e-\u0442\u043e \u0442\u0430\u043a\u043e\u0435, \u0447\u0442\u043e \u0432\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f.<\/p>\n<p>  <b>\u0423\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0438!<\/b> \u0418\u0437\u0432\u0435\u0441\u0442\u043d\u044b \u043b\u0438 \u0432\u0430\u043c \u043a\u0430\u043a\u0438\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0437\u0430 \u0440\u0430\u043c\u043a\u0430\u043c\u0438 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438?<\/p>\n<p>  <a href=\"https:\/\/ruvds.com\/ru-rub\/#order\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/1ba\/550\/d25\/1ba550d25e8846ce8805de564da6aa63.png\"><\/a><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/489820\/\"> https:\/\/habr.com\/ru\/company\/ruvds\/blog\/489820\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/489820\/\">\u041a\u043d\u043e\u043f\u043a\u0430 \u2014 \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445. \u0422\u0435\u0433 <code>&lt;button&gt;&lt;\/button&gt;<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0451\u043d \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043d\u0435\u043a\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0432\u0440\u043e\u0434\u0435 \u0432\u044b\u0432\u043e\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u0412 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435, \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c, \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0451\u0442 \u043e \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u044f\u0445 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>button<\/code> \u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0431\u044b \u0432 \u043b\u044e\u0431\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0442\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043a\u043d\u043e\u043f\u043e\u043a. \u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043c\u044b \u0437\u0434\u0435\u0441\u044c \u0438 \u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438.<\/p>\n<p>  <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/489820\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/k1\/7-\/ql\/k17-qlhlsy-iylytnjcmw4wjrhg.png\"><\/a>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-299308","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/299308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=299308"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/299308\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=299308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=299308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=299308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}