{"id":126,"date":"2023-03-05T03:35:57","date_gmt":"2023-03-05T00:35:57","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=126"},"modified":"2023-03-29T15:18:02","modified_gmt":"2023-03-29T12:18:02","slug":"htmlbuttons","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/buttons\/126\/","title":{"rendered":"A set of buttons"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"724\" style=\"aspect-ratio: 1567 \/ 724;\" width=\"1567\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-05_01-15-22.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\"> &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;\n  &lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js&quot;&gt; --&gt;\n  &lt;title&gt;Document&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;header&gt;\n    &lt;link href=&quot;https:\/\/fonts.googleapis.com\/css2?family=Lato&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;\n &lt;\/header&gt;\n \n &lt;h1&gt;\u041d\u0430\u0431\u043e\u0440 \u043a\u043d\u043e\u043f\u043e\u043a&lt;\/h1&gt;\n &lt;div class=&quot;frame&quot;&gt;\n   &lt;button class=&quot;custom-btn btn-1&quot;&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-2&quot;&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-3&quot;&gt;&lt;span&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/span&gt;&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-4&quot;&gt;&lt;span&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/span&gt;&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-5&quot;&gt;&lt;span&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/span&gt;&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-6&quot;&gt;&lt;span&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/span&gt;&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-7&quot;&gt;&lt;span&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/span&gt;&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-8&quot;&gt;&lt;span&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/span&gt;&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-9&quot;&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-10&quot;&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-11&quot;&gt;\u0414\u0430\u043b\u0435\u0435&lt;div class=&quot;dot&quot;&gt;&lt;\/div&gt;&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-12&quot;&gt;&lt;span&gt;\u041d\u0430\u0436\u043c\u0438!&lt;\/span&gt;&lt;span&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/span&gt;&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-13&quot;&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-14&quot;&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-15&quot;&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/button&gt;\n   &lt;button class=&quot;custom-btn btn-16&quot;&gt;\u0414\u0430\u043b\u0435\u0435&lt;\/button&gt;\n &lt;\/div&gt;\n \n&lt;\/body&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">body {\n  background: #e0e5ec;\n}\nh1 {\n  position: relative;\n  text-align: center;\n  color: #353535;\n  font-size: 50px;\n  font-family: &quot;Cormorant Garamond&quot;, serif;\n}\n\np {\n  font-family: 'Lato', sans-serif;\n  font-weight: 300;\n  text-align: center;\n  font-size: 18px;\n  color: #676767;\n}\n.frame {\n  width: 90%;\n  margin: 40px auto;\n  text-align: center;\n}\nbutton {\n  margin: 20px;\n}\n.custom-btn {\n  width: 130px;\n  height: 40px;\n  color: #fff;\n  border-radius: 5px;\n  padding: 10px 25px;\n  font-family: 'Lato', sans-serif;\n  font-weight: 500;\n  background: transparent;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  position: relative;\n  display: inline-block;\n   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),\n   7px 7px 20px 0px rgba(0,0,0,.1),\n   4px 4px 5px 0px rgba(0,0,0,.1);\n  outline: none;\n}\n\n\/* 1 *\/\n.btn-1 {\n  background: rgb(6,14,131);\n  background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);\n  border: none;\n}\n.btn-1:hover {\n   background: rgb(0,3,255);\nbackground: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);\n}\n\n\/* 2 *\/\n.btn-2 {\n  background: rgb(96,9,240);\n  background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);\n  border: none;\n  \n}\n.btn-2:before {\n  height: 0%;\n  width: 2px;\n}\n.btn-2:hover {\n  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),\n              -4px -4px 6px 0 rgba(116, 125, 136, .5), \n    inset -4px -4px 6px 0 rgba(255,255,255,.2),\n    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);\n}\n\n\n\/* 3 *\/\n.btn-3 {\n  background: rgb(0,172,238);\nbackground: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);\n  width: 130px;\n  height: 40px;\n  line-height: 42px;\n  padding: 0;\n  border: none;\n  \n}\n.btn-3 span {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.btn-3:before,\n.btn-3:after {\n  position: absolute;\n  content: &quot;&quot;;\n  right: 0;\n  top: 0;\n   background: rgba(2,126,251,1);\n  transition: all 0.3s ease;\n}\n.btn-3:before {\n  height: 0%;\n  width: 2px;\n}\n.btn-3:after {\n  width: 0%;\n  height: 2px;\n}\n.btn-3:hover{\n   background: transparent;\n  box-shadow: none;\n}\n.btn-3:hover:before {\n  height: 100%;\n}\n.btn-3:hover:after {\n  width: 100%;\n}\n.btn-3 span:hover{\n   color: rgba(2,126,251,1);\n}\n.btn-3 span:before,\n.btn-3 span:after {\n  position: absolute;\n  content: &quot;&quot;;\n  left: 0;\n  bottom: 0;\n   background: rgba(2,126,251,1);\n  transition: all 0.3s ease;\n}\n.btn-3 span:before {\n  width: 2px;\n  height: 0%;\n}\n.btn-3 span:after {\n  width: 0%;\n  height: 2px;\n}\n.btn-3 span:hover:before {\n  height: 100%;\n}\n.btn-3 span:hover:after {\n  width: 100%;\n}\n\n\/* 4 *\/\n.btn-4 {\n  background-color: #4dccc6;\nbackground-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);\n  line-height: 42px;\n  padding: 0;\n  border: none;\n}\n.btn-4:hover{\n  background-color: #89d8d3;\nbackground-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);\n}\n.btn-4 span {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.btn-4:before,\n.btn-4:after {\n  position: absolute;\n  content: &quot;&quot;;\n  right: 0;\n  top: 0;\n   box-shadow:  4px 4px 6px 0 rgba(255,255,255,.9),\n              -4px -4px 6px 0 rgba(116, 125, 136, .2), \n    inset -4px -4px 6px 0 rgba(255,255,255,.9),\n    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);\n  transition: all 0.3s ease;\n}\n.btn-4:before {\n  height: 0%;\n  width: .1px;\n}\n.btn-4:after {\n  width: 0%;\n  height: .1px;\n}\n.btn-4:hover:before {\n  height: 100%;\n}\n.btn-4:hover:after {\n  width: 100%;\n}\n.btn-4 span:before,\n.btn-4 span:after {\n  position: absolute;\n  content: &quot;&quot;;\n  left: 0;\n  bottom: 0;\n  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.9),\n              -4px -4px 6px 0 rgba(116, 125, 136, .2), \n    inset -4px -4px 6px 0 rgba(255,255,255,.9),\n    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);\n  transition: all 0.3s ease;\n}\n.btn-4 span:before {\n  width: .1px;\n  height: 0%;\n}\n.btn-4 span:after {\n  width: 0%;\n  height: .1px;\n}\n.btn-4 span:hover:before {\n  height: 100%;\n}\n.btn-4 span:hover:after {\n  width: 100%;\n}\n\n\/* 5 *\/\n.btn-5 {\n  width: 130px;\n  height: 40px;\n  line-height: 42px;\n  padding: 0;\n  border: none;\n  background: rgb(255,27,0);\nbackground: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);\n}\n.btn-5:hover {\n  color: #f0094a;\n  background: transparent;\n   box-shadow:none;\n}\n.btn-5:before,\n.btn-5:after{\n  content:'';\n  position:absolute;\n  top:0;\n  right:0;\n  height:2px;\n  width:0;\n  background: #f0094a;\n  box-shadow:\n   -1px -1px 5px 0px #fff,\n   7px 7px 20px 0px #0003,\n   4px 4px 5px 0px #0002;\n  transition:400ms ease all;\n}\n.btn-5:after{\n  right:inherit;\n  top:inherit;\n  left:0;\n  bottom:0;\n}\n.btn-5:hover:before,\n.btn-5:hover:after{\n  width:100%;\n  transition:800ms ease all;\n}\n\n\n\/* 6 *\/\n.btn-6 {\n  background: rgb(247,150,192);\nbackground: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);\n  line-height: 42px;\n  padding: 0;\n  border: none;\n}\n.btn-6 span {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.btn-6:before,\n.btn-6:after {\n  position: absolute;\n  content: &quot;&quot;;\n  height: 0%;\n  width: 1px;\n box-shadow:\n   -1px -1px 20px 0px rgba(255,255,255,1),\n   -4px -4px 5px 0px rgba(255,255,255,1),\n   7px 7px 20px 0px rgba(0,0,0,.4),\n   4px 4px 5px 0px rgba(0,0,0,.3);\n}\n.btn-6:before {\n  right: 0;\n  top: 0;\n  transition: all 500ms ease;\n}\n.btn-6:after {\n  left: 0;\n  bottom: 0;\n  transition: all 500ms ease;\n}\n.btn-6:hover{\n  background: transparent;\n  color: #76aef1;\n  box-shadow: none;\n}\n.btn-6:hover:before {\n  transition: all 500ms ease;\n  height: 100%;\n}\n.btn-6:hover:after {\n  transition: all 500ms ease;\n  height: 100%;\n}\n.btn-6 span:before,\n.btn-6 span:after {\n  position: absolute;\n  content: &quot;&quot;;\n  box-shadow:\n   -1px -1px 20px 0px rgba(255,255,255,1),\n   -4px -4px 5px 0px rgba(255,255,255,1),\n   7px 7px 20px 0px rgba(0,0,0,.4),\n   4px 4px 5px 0px rgba(0,0,0,.3);\n}\n.btn-6 span:before {\n  left: 0;\n  top: 0;\n  width: 0%;\n  height: .5px;\n  transition: all 500ms ease;\n}\n.btn-6 span:after {\n  right: 0;\n  bottom: 0;\n  width: 0%;\n  height: .5px;\n  transition: all 500ms ease;\n}\n.btn-6 span:hover:before {\n  width: 100%;\n}\n.btn-6 span:hover:after {\n  width: 100%;\n}\n\n\/* 7 *\/\n.btn-7 {\nbackground: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);\n  line-height: 42px;\n  padding: 0;\n  border: none;\n}\n.btn-7 span {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.btn-7:before,\n.btn-7:after {\n  position: absolute;\n  content: &quot;&quot;;\n  right: 0;\n  bottom: 0;\n  background: rgba(251,75,2,1);\n  box-shadow:\n   -7px -7px 20px 0px rgba(255,255,255,.9),\n   -4px -4px 5px 0px rgba(255,255,255,.9),\n   7px 7px 20px 0px rgba(0,0,0,.2),\n   4px 4px 5px 0px rgba(0,0,0,.3);\n  transition: all 0.3s ease;\n}\n.btn-7:before{\n   height: 0%;\n   width: 2px;\n}\n.btn-7:after {\n  width: 0%;\n  height: 2px;\n}\n.btn-7:hover{\n  color: rgba(251,75,2,1);\n  background: transparent;\n}\n.btn-7:hover:before {\n  height: 100%;\n}\n.btn-7:hover:after {\n  width: 100%;\n}\n.btn-7 span:before,\n.btn-7 span:after {\n  position: absolute;\n  content: &quot;&quot;;\n  left: 0;\n  top: 0;\n  background: rgba(251,75,2,1);\n  box-shadow:\n   -7px -7px 20px 0px rgba(255,255,255,.9),\n   -4px -4px 5px 0px rgba(255,255,255,.9),\n   7px 7px 20px 0px rgba(0,0,0,.2),\n   4px 4px 5px 0px rgba(0,0,0,.3);\n  transition: all 0.3s ease;\n}\n.btn-7 span:before {\n  width: 2px;\n  height: 0%;\n}\n.btn-7 span:after {\n  height: 2px;\n  width: 0%;\n}\n.btn-7 span:hover:before {\n  height: 100%;\n}\n.btn-7 span:hover:after {\n  width: 100%;\n}\n\n\/* 8 *\/\n.btn-8 {\n  background-color: #f0ecfc;\nbackground-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);\n  line-height: 42px;\n  padding: 0;\n  border: none;\n}\n.btn-8 span {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.btn-8:before,\n.btn-8:after {\n  position: absolute;\n  content: &quot;&quot;;\n  right: 0;\n  bottom: 0;\n  background: #c797eb;\n  \/*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),\n              -4px -4px 6px 0 rgba(116, 125, 136, .2), \n    inset -4px -4px 6px 0 rgba(255,255,255,.5),\n    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*\/\n  transition: all 0.3s ease;\n}\n.btn-8:before{\n   height: 0%;\n   width: 2px;\n}\n.btn-8:after {\n  width: 0%;\n  height: 2px;\n}\n.btn-8:hover:before {\n  height: 100%;\n}\n.btn-8:hover:after {\n  width: 100%;\n}\n.btn-8:hover{\n  background: transparent;\n}\n.btn-8 span:hover{\n  color: #c797eb;\n}\n.btn-8 span:before,\n.btn-8 span:after {\n  position: absolute;\n  content: &quot;&quot;;\n  left: 0;\n  top: 0;\n  background: #c797eb;\n  \/*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),\n              -4px -4px 6px 0 rgba(116, 125, 136, .2), \n    inset -4px -4px 6px 0 rgba(255,255,255,.5),\n    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*\/\n  transition: all 0.3s ease;\n}\n.btn-8 span:before {\n  width: 2px;\n  height: 0%;\n}\n.btn-8 span:after {\n  height: 2px;\n  width: 0%;\n}\n.btn-8 span:hover:before {\n  height: 100%;\n}\n.btn-8 span:hover:after {\n  width: 100%;\n}\n  \n\n\/* 9 *\/\n.btn-9 {\n  border: none;\n  transition: all 0.3s ease;\n  overflow: hidden;\n}\n.btn-9:after {\n  position: absolute;\n  content: &quot; &quot;;\n  z-index: -1;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n   background-color: #1fd1f9;\nbackground-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);\n  transition: all 0.3s ease;\n}\n.btn-9:hover {\n  background: transparent;\n  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),\n              -4px -4px 6px 0 rgba(116, 125, 136, .2), \n    inset -4px -4px 6px 0 rgba(255,255,255,.5),\n    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);\n  color: #fff;\n}\n.btn-9:hover:after {\n  -webkit-transform: scale(2) rotate(180deg);\n  transform: scale(2) rotate(180deg);\n  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),\n              -4px -4px 6px 0 rgba(116, 125, 136, .2), \n    inset -4px -4px 6px 0 rgba(255,255,255,.5),\n    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);\n}\n\n\/* 10 *\/\n.btn-10 {\n  background: rgb(22,9,240);\nbackground: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%);\n  color: #fff;\n  border: none;\n  transition: all 0.3s ease;\n  overflow: hidden;\n}\n.btn-10:after {\n  position: absolute;\n  content: &quot; &quot;;\n  top: 0;\n  left: 0;\n  z-index: -1;\n  width: 100%;\n  height: 100%;\n  transition: all 0.3s ease;\n  -webkit-transform: scale(.1);\n  transform: scale(.1);\n}\n.btn-10:hover {\n  color: #fff;\n  border: none;\n  background: transparent;\n}\n.btn-10:hover:after {\n  background: rgb(0,3,255);\nbackground: linear-gradient(0deg, rgba(2,126,251,1) 0%,  rgba(0,3,255,1)100%);\n  -webkit-transform: scale(1);\n  transform: scale(1);\n}\n\n\/* 11 *\/\n.btn-11 {\n  border: none;\n  background: rgb(251,33,117);\n    background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);\n    color: #fff;\n    overflow: hidden;\n}\n.btn-11:hover {\n    text-decoration: none;\n    color: #fff;\n}\n.btn-11:before {\n    position: absolute;\n    content: '';\n    display: inline-block;\n    top: -180px;\n    left: 0;\n    width: 30px;\n    height: 100%;\n    background-color: #fff;\n    animation: shiny-btn1 3s ease-in-out infinite;\n}\n.btn-11:hover{\n  opacity: .7;\n}\n.btn-11:active{\n  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),\n              -4px -4px 6px 0 rgba(116, 125, 136, .2), \n    inset -4px -4px 6px 0 rgba(255,255,255,.2),\n    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);\n}\n\n\n@-webkit-keyframes shiny-btn1 {\n    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }\n    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }\n    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }\n    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }\n}\n\n\n\/* 12 *\/\n.btn-12{\n  position: relative;\n  right: 20px;\n  bottom: 20px;\n  border:none;\n  box-shadow: none;\n  width: 130px;\n  height: 40px;\n  line-height: 42px;\n  -webkit-perspective: 230px;\n  perspective: 230px;\n}\n.btn-12 span {\n  background: rgb(0,172,238);\nbackground: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);\n  display: block;\n  position: absolute;\n  width: 130px;\n  height: 40px;\n  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),\n   7px 7px 20px 0px rgba(0,0,0,.1),\n   4px 4px 5px 0px rgba(0,0,0,.1);\n  border-radius: 5px;\n  margin:0;\n  text-align: center;\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n  -webkit-transition: all .3s;\n  transition: all .3s;\n}\n.btn-12 span:nth-child(1) {\n  box-shadow:\n   -7px -7px 20px 0px #fff9,\n   -4px -4px 5px 0px #fff9,\n   7px 7px 20px 0px #0002,\n   4px 4px 5px 0px #0001;\n  -webkit-transform: rotateX(90deg);\n  -moz-transform: rotateX(90deg);\n  transform: rotateX(90deg);\n  -webkit-transform-origin: 50% 50% -20px;\n  -moz-transform-origin: 50% 50% -20px;\n  transform-origin: 50% 50% -20px;\n}\n.btn-12 span:nth-child(2) {\n  -webkit-transform: rotateX(0deg);\n  -moz-transform: rotateX(0deg);\n  transform: rotateX(0deg);\n  -webkit-transform-origin: 50% 50% -20px;\n  -moz-transform-origin: 50% 50% -20px;\n  transform-origin: 50% 50% -20px;\n}\n.btn-12:hover span:nth-child(1) {\n  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),\n   7px 7px 20px 0px rgba(0,0,0,.1),\n   4px 4px 5px 0px rgba(0,0,0,.1);\n  -webkit-transform: rotateX(0deg);\n  -moz-transform: rotateX(0deg);\n  transform: rotateX(0deg);\n}\n.btn-12:hover span:nth-child(2) {\n  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),\n   7px 7px 20px 0px rgba(0,0,0,.1),\n   4px 4px 5px 0px rgba(0,0,0,.1);\n color: transparent;\n  -webkit-transform: rotateX(-90deg);\n  -moz-transform: rotateX(-90deg);\n  transform: rotateX(-90deg);\n}\n\n\n\/* 13 *\/\n.btn-13 {\n  background-color: #89d8d3;\nbackground-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);\n  border: none;\n  z-index: 1;\n}\n.btn-13:after {\n  position: absolute;\n  content: &quot;&quot;;\n  width: 100%;\n  height: 0;\n  bottom: 0;\n  left: 0;\n  z-index: -1;\n  border-radius: 5px;\n   background-color: #4dccc6;\nbackground-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);\n  box-shadow:\n   -7px -7px 20px 0px #fff9,\n   -4px -4px 5px 0px #fff9,\n   7px 7px 20px 0px #0002,\n   4px 4px 5px 0px #0001;\n  transition: all 0.3s ease;\n}\n.btn-13:hover {\n  color: #fff;\n}\n.btn-13:hover:after {\n  top: 0;\n  height: 100%;\n}\n.btn-13:active {\n  top: 2px;\n}\n\n\n\/* 14 *\/\n.btn-14 {\n  background: rgb(255,151,0);\n  border: none;\n  z-index: 1;\n}\n.btn-14:after {\n  position: absolute;\n  content: &quot;&quot;;\n  width: 100%;\n  height: 0;\n  top: 0;\n  left: 0;\n  z-index: -1;\n  border-radius: 5px;\n  background-color: #eaf818;\n  background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);\n   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5)\n   7px 7px 20px 0px rgba(0,0,0,.1),\n   4px 4px 5px 0px rgba(0,0,0,.1);\n  transition: all 0.3s ease;\n}\n.btn-14:hover {\n  color: #000;\n}\n.btn-14:hover:after {\n  top: auto;\n  bottom: 0;\n  height: 100%;\n}\n.btn-14:active {\n  top: 2px;\n}\n\n\/* 15 *\/\n.btn-15 {\n  background: #b621fe;\n  border: none;\n  z-index: 1;\n}\n.btn-15:after {\n  position: absolute;\n  content: &quot;&quot;;\n  width: 0;\n  height: 100%;\n  top: 0;\n  right: 0;\n  z-index: -1;\n  background-color: #663dff;\n  border-radius: 5px;\n   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),\n   7px 7px 20px 0px rgba(0,0,0,.1),\n   4px 4px 5px 0px rgba(0,0,0,.1);\n  transition: all 0.3s ease;\n}\n.btn-15:hover {\n  color: #fff;\n}\n.btn-15:hover:after {\n  left: 0;\n  width: 100%;\n}\n.btn-15:active {\n  top: 2px;\n}\n\n\n\/* 16 *\/\n.btn-16 {\n  border: none;\n  color: #000;\n}\n.btn-16:after {\n  position: absolute;\n  content: &quot;&quot;;\n  width: 0;\n  height: 100%;\n  top: 0;\n  left: 0;\n  direction: rtl;\n  z-index: -1;\n  box-shadow:\n   -7px -7px 20px 0px #fff9,\n   -4px -4px 5px 0px #fff9,\n   7px 7px 20px 0px #0002,\n   4px 4px 5px 0px #0001;\n  transition: all 0.3s ease;\n}\n.btn-16:hover {\n  color: #000;\n}\n.btn-16:hover:after {\n  left: auto;\n  right: 0;\n  width: 100%;\n}\n.btn-16:active {\n  top: 2px;\n}<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[],"class_list":["post-126","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-buttons"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=126"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/126\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/127"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}