{"id":367997,"date":"2022-10-25T11:08:00","date_gmt":"2022-10-25T08:08:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367997"},"modified":"2023-05-09T17:29:59","modified_gmt":"2023-05-09T14:29:59","slug":"uzywanie-elementu-przycisku-html5-jako-formularza-kontaktowego-7-przeslij","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/uzywanie-elementu-przycisku-html5-jako-formularza-kontaktowego-7-przeslij\/","title":{"rendered":"U\u017cywanie elementu przycisku HTML5 jako formularza kontaktowego 7 Prze\u015blij"},"content":{"rendered":"\n<p>Posiadanie witryny WordPress oznacza, \u017ce \u200b\u200bnajprawdopodobniej b\u0119dziesz potrzebowa\u0107 gdzie\u015b formularza kontaktowego, niezale\u017cnie od tego, czy jest to newsletter, <a href=\"https:\/\/themewp.inform.click\/pl\/strona-kontaktowa-wordpress-i-dlaczego\/\" title=\"strona kontaktowa\">strona kontaktowa<\/a>, ankieta, czy co\u015b innego. W przypadku CMS, takiego jak WordPress, <strong>skonfigurowanie formularza kontaktowego jest do\u015b\u0107 prostym zadaniem<\/strong>. Mianowicie, <a href=\"https:\/\/themewp.inform.click\/pl\/top-5-darmowych-wtyczek-do-formularzy-kontaktowych-dla-wordpress\/\" title=\"istnieje wiele wtyczek formularzy kontaktowych, z\">istnieje wiele wtyczek formularzy kontaktowych, z<\/a> kt\u00f3rych mo\u017cna korzysta\u0107, a <a href=\"https:\/\/wordpress.org\/plugins\/contact-form-7\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Contact Form 7<\/a> jest jednym z najpopularniejszych.<\/p>\n<p>Aby\u015b mia\u0142 ja\u015bniejszy obraz tego, co mo\u017ce zrobi\u0107 wtyczka Contact Form 7, oto kilka przyk\u0142ad\u00f3w formularzy kontaktowych utworzonych za pomoc\u0105 tej wtyczki, kt\u00f3re s\u0105 dostarczane z motywami premium w ThemeForest:<\/p>\n<p>Nie tylko tworzenie dowolnego formularza kontaktowego w WordPressie jest \u0142atwe, ale sam proces jest r\u00f3wnie\u017c dobrze udokumentowany. Dlatego przejdziemy od razu do sedna.<\/p>\n<p>Korzystaj\u0105c z tej wtyczki, nie b\u0119dziesz musia\u0142 przechodzi\u0107 przez k\u0142opoty z tworzeniem niestandardowego formularza i funkcjonalno\u015bci zaplecza, co drastycznie przyspieszy proces. Jednak problematyczny mo\u017ce okaza\u0107 si\u0119 przycisk przesy\u0142ania Formularza kontaktowego 7, kt\u00f3ry jest elementem wej\u015bciowym typu \u201eprze\u015blij&quot;.<\/p>\n<p>Nawet ze standardowym przyciskiem przesy\u0142ania danych wej\u015bciowych b\u0119dziesz mia\u0142 \u0142adny, dzia\u0142aj\u0105cy formularz. Jednak <strong>\u00a0problem pojawia si\u0119, je\u015bli chcesz doda\u0107 dodatkow\u0105 stylizacj\u0119 dla tego elementu<\/strong>. Jak ju\u017c zapewne wiesz, istniej\u0105 pewne ograniczenia, je\u015bli chodzi o css, poniewa\u017c nie mo\u017cesz tutaj u\u017cy\u0107 pseudoelement\u00f3w, takich jak :before lub :after, kt\u00f3re mog\u0105 by\u0107 przydatne do dodania podkre\u015blenia najechania kursorem, ikonicznej ikony czcionki lub czegokolwiek innego do animacji co by\u0142oby mi\u0142ym wyko\u0144czeniem twojej formy.<\/p>\n<p>Oczywi\u015bcie mo\u017cliwe jest osi\u0105gni\u0119cie znakomitych animacji po prostu przez zawijanie przycisku przesy\u0142ania jakim\u015b div z w\u0142asn\u0105 klas\u0105, ale zmieniaj\u0105c dane wej\u015bciowe na przycisk, mo\u017cesz mie\u0107 znacznie wi\u0119ksz\u0105 kontrol\u0119.<\/p>\n<p>Zobaczmy, jak mo\u017cesz u\u017cy\u0107 elementu przycisku HTML5 jako przycisku przesy\u0142ania w formularzu kontaktowym.<\/p>\n<p>Przed zmian\u0105 przycisk przesy\u0142ania b\u0119dzie wygl\u0105da\u0142 tak.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-333243-633e650cd71ab.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-333243-633e650cd71ab.jpg\" alt=\"U\u017cywanie elementu przycisku HTML5 jako formularza kontaktowego 7 Prze\u015blij\"><\/a><\/p>\n<p>Najpierw musimy usun\u0105\u0107 domy\u015blny tag przesy\u0142ania formularza kontaktowego 7. Mo\u017cesz to zrobi\u0107 za pomoc\u0105 tej prostej linii kodu:<\/p>\n<p>\/ usuwanie domy\u015blnego tagu przesy\u0142ania \/<\/p>\n<p>remove_action (&#8217;wpcf7_init&#8217;, 'wpcf7_add_form_tag_submit&#8217;);<\/p>\n<p>\/ usuwanie domy\u015blnego tagu przesy\u0142ania \/ remove_action(&#8217;wpcf7_init&#8217;, 'wpcf7_add_form_tag_submit&#8217;);<\/p>\n<pre><code>\/*removing default submit tag*\/\nremove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');<\/code><\/pre>\n<p>Po drugie, musimy doda\u0107 akcj\u0119 z nasz\u0105 funkcj\u0105, kt\u00f3ra b\u0119dzie <strong>przechowywa\u0107 nasz niestandardowy znacznik dla przycisku<\/strong>. To kolejna prosta linia:<\/p>\n<p>\/ dodanie akcji z funkcj\u0105 obs\u0142uguj\u0105c\u0105 nasz znacznik przycisku \/<\/p>\n<p>add_action(&#8217;wpcf7_init&#8217;, 'dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button&#8217;);<\/p>\n<p>\/ dodanie akcji z funkcj\u0105 obs\u0142uguj\u0105c\u0105 nasz znacznik przycisku \/ add_action(&#8217;wpcf7_init&#8217;, 'twentysixteen_child_cf7_button&#8217;);<\/p>\n<pre><code>\/*adding action with function which handles our button markup*\/\nadd_action('wpcf7_init', 'twentysixteen_child_cf7_button');<\/code><\/pre>\n<p>Nast\u0119pnie dodajemy tag, kt\u00f3ry wywo\u0142a funkcj\u0119 obs\u0142ugi przycisku:<\/p>\n<p>\/ dodanie tagu przycisku przesy\u0142ania \/<\/p>\n<p>if (! function_exists(&#8217;dwadzie\u015bcia szesna\u015bcie_dzieci_cf7_button&#8217;)) {<\/p>\n<p>funkcja dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button() {<\/p>\n<p>wpcf7_add_form_tag(&#8217;prze\u015blij&#8217;, 'twentysixteen_child_cf7_button_handler&#8217;);<\/p>\n<p>\/ dodanie znacznika przycisku submit \/ if (!function_exists(&#8217;dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button&#8217;)) { function dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button() { wpcf7_add_form_tag(&#8217;submit&#8217;, 'dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button_handler&#8217;); } }<\/p>\n<pre><code>\/*adding out submit button tag*\/\nif (!function_exists('twentysixteen_child_cf7_button')) {\nfunction twentysixteen_child_cf7_button() {\nwpcf7_add_form_tag('submit', 'twentysixteen_child_cf7_button_handler');\n}\n}<\/code><\/pre>\n<p>Na koniec musimy doda\u0107 znacznik do procedury obs\u0142ugi:<\/p>\n<p>\/ przycisk out znacznik wewn\u0105trz handlera \/<\/p>\n<p>if (!function_exists(&#8217;dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button_handler&#8217;)) {<\/p>\n<p>funkcja dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button_handler($tag) {<\/p>\n<p>$tag = nowy WPCF7_FormTag($tag);<\/p>\n<p>$klasa = wpcf7_form_controls_class($tag-&gt;typ);<\/p>\n<p>$atts[&#8217;class&#8217;] = $tag-&gt;get_class_option($class);<\/p>\n<p>$atts[&#8217;class&#8217;] .= &#8217; dwadzie\u015bcia szesna\u015bcie-dzieci-niestandardowe-btn&#8217;;<\/p>\n<p>$atts[&#8217;id&#8217;] = $tag-&gt;get_id_option();<\/p>\n<p>$atts[&#8217;tabindex&#8217;] = $tag-&gt;get_option(&#8217;tabindex&#8217;, 'int&#8217;, true);<\/p>\n<p>$warto\u015b\u0107 = isset($tag-&gt;values[0])? $tag-&gt;warto\u015bci[0]: &#8222;;<\/p>\n<p>$warto\u015b\u0107 = esc html_ (&#8217;Skontaktuj si\u0119 z nami&#8217;, 'dwadzie\u015bcia szesna\u015bcie&#8217;);<\/p>\n<p>$atts[&#8217;typ&#8217;] = 'prze\u015blij&#8217;;<\/p>\n<p>$atts = wpcf7_format_atts($atts);<\/p>\n<p>$html = sprintf(&#8221;, $atty, $warto\u015b\u0107);<\/p>\n<p>\/ out znacznik przycisku wewn\u0105trz handlera \/ if (! funkcja istnieje(&#8217; dwadzie\u015bcia szesna\u015bcie child_cf7_button_handler&#8217;)) { function dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button_handler($tag) { $tag = new WPCF7_FormTag($tag); $klasa = wpcf7_form_controls_class($tag-&gt;typ); $atts = tablica(); $atts[&#8217;class&#8217;] = $tag-&gt;get_class_option($class); $atts[&#8217;class&#8217;] .= &#8217; dwadzie\u015bcia szesna\u015bcie-dzieci-niestandardowe-btn&#8217;; $atts[&#8217;id&#8217;] = $tag-&gt;get_id_option(); $atts[&#8217;tabindex&#8217;] = $tag-&gt;get_option(&#8217;tabindex&#8217;, 'int&#8217;, true); $warto\u015b\u0107 = isset($tag-&gt;values[0])? $tag-&gt;warto\u015bci[0]: &#8222;; if (empty($value)) { $value = esc_html (\u201eSkontaktuj si\u0119 z nami&#8221;, \u201edwadzie\u015bcia szesna\u015bcie&#8221;); } $atts[&#8217;typ&#8217;] = 'prze\u015blij&#8217;; $atts = wpcf7_format_atts($atts); $html = sprintf(&#8221;, $atty, $warto\u015b\u0107); zwr\u00f3\u0107 $html; } }<\/p>\n<pre><code>\/*out button markup inside handler*\/\nif (!function_exists('twentysixteen_child_cf7_button_handler')) {\nfunction twentysixteen_child_cf7_button_handler($tag) {\n$tag = new WPCF7_FormTag($tag);\n$class = wpcf7_form_controls_class($tag-&gt;type);\n$atts = array();\n$atts['class'] = $tag-&gt;get_class_option($class);\n$atts['class'] .= ' twentysixteen-child-custom-btn';\n$atts['id'] = $tag-&gt;get_id_option();\n$atts['tabindex'] = $tag-&gt;get_option('tabindex', 'int', true);\n$value = isset($tag-&gt;values[0])? $tag-&gt;values[0]: '';\nif (empty($value)) {\n$value = esc_html__('Contact Us', 'twentysixteen');\n}\n$atts['type'] = 'submit';\n$atts = wpcf7_format_atts($atts);\n$html = sprintf('', $atts, $value);\nreturn $html;\n}\n}<\/code><\/pre>\n<p>Najwa\u017cniejsza jest funkcja obs\u0142ugi. Opr\u00f3cz drukowania domy\u015blnej klasy i identyfikatora, dodamy do niego r\u00f3wnie\u017c <strong>niestandardow\u0105 klas\u0119 css<\/strong>. W ostatniej cz\u0119\u015bci, w kt\u00f3rej mamy zmienn\u0105 $html, umieszczamy znacznik przycisku z ikon\u0105 jode\u0142kow\u0105 FontAwesome. Pami\u0119taj, \u017ce <strong>musisz mie\u0107 t\u0119 czcionk\u0119 FontAwesome w swoim motywie.<\/strong> Je\u015bli go nie masz, upewnij si\u0119, \u017ce znajdziesz wtyczk\u0119, kt\u00f3ra go zawiera.<\/p>\n<p>Teraz nasz zmieniony przycisk przesy\u0142ania b\u0119dzie wygl\u0105da\u0142 tak:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-333243-633e65105c578.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-333243-633e65105c578.jpg\" alt=\"U\u017cywanie elementu przycisku HTML5 jako formularza kontaktowego 7 Prze\u015blij\"><\/a><\/p>\n<p>Jak wida\u0107, gdy sprawdzasz swoj\u0105 stron\u0119 za pomoc\u0105 inspektora sieci Chrome, zawiera ona dok\u0142adnie te same znaczniki, kt\u00f3re ustawili\u015bmy w module obs\u0142ugi.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-333243-633e6513bb3e9.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-333243-633e6513bb3e9.jpg\" alt=\"U\u017cywanie elementu przycisku HTML5 jako formularza kontaktowego 7 Prze\u015blij\"><\/a><\/p>\n<p>A oto kompletny kod:<\/p>\n<p>\/ usuwanie domy\u015blnego tagu przesy\u0142ania \/<\/p>\n<p>remove_action (&#8217;wpcf7_init&#8217;, 'wpcf7_add_form_tag_submit&#8217;);<\/p>\n<p>\/ dodanie akcji z funkcj\u0105 obs\u0142uguj\u0105c\u0105 nasz znacznik przycisku \/<\/p>\n<p>add_action(&#8217;wpcf7_init&#8217;, 'dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button&#8217;);<\/p>\n<p>\/ dodanie tagu przycisku przesy\u0142ania \/<\/p>\n<p>if (! function_exists(&#8217;dwadzie\u015bcia szesna\u015bcie_dzieci_cf7_button&#8217;)) {<\/p>\n<p>funkcja dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button () {<\/p>\n<p>wpcf7_add_form_tag(&#8217;prze\u015blij&#8217;, 'twentysixteen_child_cf7_button_handler&#8217;);<\/p>\n<p>\/ przycisk out znacznik wewn\u0105trz handlera \/<\/p>\n<p>if (!function_exists(&#8217;dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button_handler&#8217;)) {<\/p>\n<p>funkcja dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button_handler($tag) {<\/p>\n<p>$tag = nowy WPCF7_FormTag($tag);<\/p>\n<p>$klasa = wpcf7_form_controls_class($tag-&gt;typ);<\/p>\n<p>$atts[&#8217;class&#8217;] = $tag-&gt;get_class_option($class);<\/p>\n<p>$atts[&#8217;class&#8217;] .= &#8217; dwadzie\u015bcia szesna\u015bcie-dzieci-niestandardowe-btn&#8217;;<\/p>\n<p>$atts[&#8217;id&#8217;] = $tag-&gt;get_id_option();<\/p>\n<p>$atts[&#8217;tabindex&#8217;] = $tag-&gt;get_option(&#8217;tabindex&#8217;, 'int&#8217;, true);<\/p>\n<p>$warto\u015b\u0107 = isset($tag-&gt;values[0])? $tag-&gt;warto\u015bci[0]: &#8222;;<\/p>\n<p>$warto\u015b\u0107 = esc html_ (&#8217;Wy\u015blij&#8217;, 'dwadzie\u015bcia szesna\u015bcie&#8217;);<\/p>\n<p>$atts[&#8217;typ&#8217;] = 'prze\u015blij&#8217;;<\/p>\n<p>$atts = wpcf7_format_atts($atts);<\/p>\n<p>$html = sprintf(&#8221;, $atty, $warto\u015b\u0107);<\/p>\n<p>\/ usuwanie domy\u015blnego tagu przesy\u0142ania \/ remove_action(&#8217;wpcf7_init&#8217;, 'wpcf7_add_form_tag_submit&#8217;); \/ dodanie akcji z funkcj\u0105 obs\u0142uguj\u0105c\u0105 nasz znacznik przycisku \/ add_action(&#8217;wpcf7_init&#8217;, 'twentysixteen_child_cf7_button&#8217;); \/ dodanie znacznika przycisku submit \/ if (!function_exists(&#8217;dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button&#8217;)) { function dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button() { wpcf7_add_form_tag(&#8217;submit&#8217;, 'dwadzie\u015bcia szesna\u015bcie_dziecko_cf7_button_handler&#8217;); } } \/ przycisk out znacznik wewn\u0105trz handlera \/ if (!funkcja istnieje(&#8217;dwadzie\u015bcia szesna\u015bciechild_cf7_button_handler&#8217;)) { function dwadzie\u015bciasixteen_child_cf7_button_handler($tag) { $tag = nowy WPCF7_FormTag($tag); $klasa = wpcf7_form_controls_class($tag-&gt;typ); $atts = tablica(); $atts[&#8217;class&#8217;] = $tag-&gt;get_class_option($class); $atts[&#8217;class&#8217;] .= &#8217; dwadzie\u015bcia szesna\u015bcie-dzieci-niestandardowe-btn&#8217;; $atts[&#8217;id&#8217;] = $tag-&gt;get_id_option(); $atts[&#8217;tabindex&#8217;] = $tag-&gt;get_option(&#8217;tabindex&#8217;, 'int&#8217;, true); $warto\u015b\u0107 = isset($tag-&gt;values[0])? $tag-&gt;warto\u015bci[0]: &#8222;; if (empty($value)) { $value = esc_html (&#8217;Wy\u015blij&#8217;, 'dwadzie\u015bcia szesna\u015bcie&#8217;); } $atts[&#8217;typ&#8217;] = 'prze\u015blij&#8217;; $atts = wpcf7_format_atts($atts); $html = sprintf(&#8221;, $atty, $warto\u015b\u0107); zwr\u00f3\u0107 $html; } }<\/p>\n<pre><code>\/*removing default submit tag*\/\nremove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');\n\/*adding action with function which handles our button markup*\/\nadd_action('wpcf7_init', 'twentysixteen_child_cf7_button');\n\/*adding out submit button tag*\/\nif (!function_exists('twentysixteen_child_cf7_button')) {\nfunction twentysixteen_child_cf7_button() {\nwpcf7_add_form_tag('submit', 'twentysixteen_child_cf7_button_handler');\n}\n}\n\/*out button markup inside handler*\/\nif (!function_exists('twentysixteen_child_cf7_button_handler')) {\nfunction twentysixteen_child_cf7_button_handler($tag) {\n$tag = new WPCF7_FormTag($tag);\n$class = wpcf7_form_controls_class($tag-&gt;type);\n$atts = array();\n$atts['class'] = $tag-&gt;get_class_option($class);\n$atts['class'] .= ' twentysixteen-child-custom-btn';\n$atts['id'] = $tag-&gt;get_id_option();\n$atts['tabindex'] = $tag-&gt;get_option('tabindex', 'int', true);\n$value = isset($tag-&gt;values[0])? $tag-&gt;values[0]: '';\nif (empty($value)) {\n$value = esc_html__('Send', 'twentysixteen');\n}\n$atts['type'] = 'submit';\n$atts = wpcf7_format_atts($atts);\n$html = sprintf('', $atts, $value);\nreturn $html;\n}\n}<\/code><\/pre>\n<p>Gdy wszystko jest na swoim miejscu, mo\u017cesz <strong>u\u017cy\u0107 dodatkowych klas i znacznik\u00f3w, aby dostosowa\u0107 styl przycisku do w\u0142asnych upodoba\u0144<\/strong>. Jako dodatek dodamy do niego prost\u0105 animacj\u0119 najechania z poni\u017cszym kodem css.<\/p>\n<p>button.dwadzie\u015bcia szesna\u015bcie-dziecko-niestandardowe-btn {<\/p>\n<p>-webkit-transition: -webkit-background .2s z\u0142agodzenie;<\/p>\n<p>-moz-transition: -moz-background .2s luz;<\/p>\n<p>przej\u015bcie: \u0142atwo\u015b\u0107 t\u0142a .2s;<\/p>\n<p>button.dwadzie\u015bcia szesna\u015bcie-dzieci-niestandardowy-btn .dwadzie\u015bcia szesna\u015bcie-dziecko-niestandardowy-btn-tekst {<\/p>\n<p>button.dwadzie\u015bcia szesna\u015bcie-dziecko-niestandardowa-btn .dwadzie\u015bcia szesna\u015bcie-dziecko-niestandardowa-ikon {<\/p>\n<p>-webkit-transition: -webkit-transform .2s \u0142agodzenie;<\/p>\n<p>-moz-transition: -moz-transform .2s luz;<\/p>\n<p>przej\u015bcie: transformacja .2s luz;<\/p>\n<p>button.dwadzie\u015bcia szesna\u015bcie-dzieci-niestandardowa-btn:najed\u017a .dwadzie\u015bcia szesna\u015bcie-dziec-niestandardowa-ikona {<\/p>\n<p>-transformacja webkit: translate3d(3px,0,0);<\/p>\n<p>-moz-transform: translate3d(3px,0,0);<\/p>\n<p>transformacja: translate3d(3px,0,0);<\/p>\n<p>button.twentysixteen-child-custom-btn { padding: 15px 45px; -webkit-transition: -webkit-background .2s z\u0142agodzenie; -moz-transition: -moz-background .2s luz; przej\u015bcie: \u0142atwo\u015b\u0107 t\u0142a .2s; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text { margines-prawy: 7px; rozmiar czcionki: 15px; } button.dwadzie\u015bcia szesna\u015bcie-dziecko-niestandardowe-btn .dwadzie\u015bcia szesna\u015bcie-dziecko-niestandardowa-ikona { rozmiar-czcionki: 12px; pozycja: wzgl\u0119dna; wy\u015bwietlacz: inline-block; wyr\u00f3wnanie w pionie: \u015brodek; wysoko\u015b\u0107 linii: dziedziczenie; -webkit-transition: -webkit-transform .2s \u0142agodzenie; -moz-transition: -moz-transform .2s luz; przej\u015bcie: transformacja .2s luz; } button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon { -webkit-transform: translate3d(3px,0,0); -moz-transform: translate3d(3px,0,0); transformacja: translate3d(3px,0,0); }<\/p>\n<pre><code>button.twentysixteen-child-custom-btn {\npadding: 15px 45px;\n-webkit-transition: -webkit-background .2s ease-out;\n-moz-transition: -moz-background .2s ease-out;\ntransition: background .2s ease;\n}\nbutton.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {\nmargin-right: 7px;\nfont-size: 15px;\n}\nbutton.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon {\nfont-size: 12px;\nposition: relative;\ndisplay: inline-block;\nvertical-align: middle;\nline-height: inherit;\n-webkit-transition: -webkit-transform .2s ease-out;\n-moz-transition: -moz-transform .2s ease-out;\ntransition: transform .2s ease-out;\n}\nbutton.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {\n-webkit-transform: translate3d(3px,0,0);\n-moz-transform: translate3d(3px,0,0);\ntransform: translate3d(3px,0,0);\n}<\/code><\/pre>\n<p>CSS mo\u017cna doda\u0107 do pliku css motywu potomnego lub po prostu z zaplecza WordPress&gt; Wygl\u0105d&gt; Dostosuj&gt; Dodatkowe pole CSS, a wraz z nim b\u0119dziesz mie\u0107 \u0142adnie wygl\u0105daj\u0105c\u0105 animacj\u0119 poruszaj\u0105cej si\u0119 strza\u0142ki po najechaniu mysz\u0105.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-333243-633e651736255.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-333243-633e651736255.jpg\" alt=\"U\u017cywanie elementu przycisku HTML5 jako formularza kontaktowego 7 Prze\u015blij\"><\/a><\/p>\n<p>I w ten spos\u00f3b zast\u0119pujesz przycisk przesy\u0142ania Formularza kontaktowego 7 elementem przycisku HTML5. Mamy nadziej\u0119, \u017ce nasze instrukcje oka\u017c\u0105 si\u0119 pomocne. Je\u015bli tak, podziel si\u0119 nim z innymi, kt\u00f3rzy r\u00f3wnie\u017c mog\u0105 z niego skorzysta\u0107.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Je\u015bli chcesz doda\u0107 dodatkowy styl do formularza kontaktowego, mo\u017cesz u\u017cy\u0107 elementu przycisku HTML5 jako przycisku przesy\u0142ania. Oto jak z niego korzysta\u0107.<\/p>\n","protected":false},"author":1,"featured_media":364438,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[572],"tags":[847],"class_list":["post-367997","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-podstawy-wordpressa","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/367997","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/comments?post=367997"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/367997\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media\/364438"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media?parent=367997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/categories?post=367997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/tags?post=367997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}