{"id":2785,"date":"2024-05-15T19:39:50","date_gmt":"2024-05-15T17:39:50","guid":{"rendered":"https:\/\/areaweb2.pppcreative.sk\/?p=2785"},"modified":"2024-05-15T20:40:10","modified_gmt":"2024-05-15T18:40:10","slug":"animacia-farby-pozadia-buttonu-z-lava-do-prava","status":"publish","type":"post","link":"https:\/\/www.areaweb.sk\/cs\/animacia-farby-pozadia-buttonu-z-lava-do-prava\/","title":{"rendered":"anim\u00e1cia farby pozadia z \u013eava do prava\/ buttons"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Animacia<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.color-select{\r\n\tpadding: 1px 5px;\r\n\tborder-radius: 10px;\r\n\tdisplay: inline-block;\r\n        text-align: center;\r\n        color: white;\r\n        background: rgb(224, 52, 66);\r\n\tbackground: linear-gradient(to left, transparent 50%, rgb(224, 52, 66) 50%) right;\r\n\tbackground-size: 200% 100%;\r\n\ttransition: .5s ease-out;\r\n\r\n\tanimation-name: fill-collor; \/\/ meno animcacie\r\n\tanimation-duration: 5s; \/\/ dlzka\r\n\tanimation-timing-function: ease-in-out; \/\/ sposob casovania\r\n        animation-iteration-count: 1;  \/\/ opakovania\r\n        animation-delay: 3s; \/\/ oneskorenie\r\n        animation-fill-mode: forwards;  \/\/ animacia ostane ako skoncila\r\n}\r\n\r\n@keyframes fill-collor {\r\n  0% {background-position: right; transform: scale(1)}\r\n  20% {background-position: left;}\r\n  50% {background-position: left;}\r\n  60% {background-position: right;}\r\n  70% {background-position: right; transform: scale(1); font-weight: normal; }\r\n  100% {background-position: left; transform: scale(1.1); font-weight: bold; }\r\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Javascript toggle<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>document.querySelector('.color-select').classList.toggle(\"color-fill\")<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Buttons<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"269\" height=\"143\" src=\"https:\/\/www.areaweb.sk\/wp-content\/uploads\/2024\/05\/button.png\" alt=\"\" class=\"wp-image-2786\" srcset=\"https:\/\/www.areaweb.sk\/wp-content\/uploads\/2024\/05\/button.png 269w, https:\/\/www.areaweb.sk\/wp-content\/uploads\/2024\/05\/button-150x80.png 150w\" sizes=\"auto, (max-width: 269px) 100vw, 269px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">background color animation left to right<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.color-select{\n\n        display: inline-block;\n\tbackground: linear-gradient(to left, transparent 50%, red 50%) right;\n\tbackground-size: 200% 100%;\n\ttransition: .5s ease-out;\n\n\tpadding: 1px 5px;\n\tborder-radius: 10px;\n        text-align: center;\n        color: white;\n        background: red;\n}\n.color-select:hover{\n\tbackground-position: left;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/jsfiddle.net\/75Umu\/3\/\" target=\"_blank\" rel=\"noopener\">https:\/\/jsfiddle.net\/75Umu\/3\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\" https:\/\/codepen.io\/kay8\/pen\/azKbjN\"> https:\/\/codepen.io\/kay8\/pen\/azKbjN<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">efekt odlesku: <br><a href=\"https:\/\/codepen.io\/iheartkode\/pen\/jqKpQV\/\" target=\"_blank\" rel=\"noopener\">https:\/\/codepen.io\/iheartkode\/pen\/jqKpQV\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">hotove styly buttonov<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> <a href=\"https:\/\/tympanus.net\/Development\/CreativeButtons\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/tympanus.net\/Development\/CreativeButtons\/<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Animacia .color-select{ padding: 1px 5px; border-radius: 10px; display: inline-block; text-align: center; color: white; background: rgb(224, 52, 66); background: linear-gradient(to left, transparent 50%, rgb(224, 52,\u2026<\/p>","protected":false},"author":1,"featured_media":2789,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[],"class_list":["post-2785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/posts\/2785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/comments?post=2785"}],"version-history":[{"count":0,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/posts\/2785\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/media\/2789"}],"wp:attachment":[{"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/media?parent=2785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/categories?post=2785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/tags?post=2785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}