{"id":11386,"date":"2024-03-21T16:29:31","date_gmt":"2024-03-21T11:29:31","guid":{"rendered":"https:\/\/codehim.com\/?p=11386"},"modified":"2024-03-21T16:29:31","modified_gmt":"2024-03-21T11:29:31","slug":"toggle-button-with-check-animation-using-html-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/","title":{"rendered":"Toggle Button With Check Animation Using HTML CSS"},"content":{"rendered":"<p>This code creates a toggle button with a <a href=\"https:\/\/codehim.com\/animation-effects\/success-check-animation-css\/\" target=\"_blank\" rel=\"noopener\">check animation<\/a> using HTML and CSS. The button indicates the power status. It visually toggles between on and off states. This button can serve various purposes in your web projects, such as indicating power status or enabling\/disabling certain features.<\/p>\n<h2>How to Create Toggle Button With Check Animation Using HTML CSS<\/h2>\n<p>1. Start by creating a new HTML file and open it in your preferred <a href=\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/\" target=\"_blank\" rel=\"noopener\">text editor<\/a>. Then, copy the following HTML code into your file:<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;label class=\"switch\"&gt;\r\n\t&lt;input class=\"switch__input\" type=\"checkbox\" role=\"switch\"&gt;\r\n\t&lt;svg class=\"switch__check\" viewBox=\"0 0 16 16\" width=\"16px\" height=\"16px\"&gt;\r\n\t\t&lt;polyline class=\"switch__check-line\" fill=\"none\" stroke=\"hsl(var(--hue),10%,50%)\" stroke-dasharray=\"9 9\" stroke-dashoffset=\"3.01\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" points=\"5,8 11,8 11,11\" \/&gt;\r\n\t&lt;\/svg&gt;\r\n\t&lt;span class=\"switch__sr\"&gt;Power&lt;\/span&gt;\r\n&lt;\/label&gt;<\/pre>\n<p>This HTML code sets up the basic structure for our toggle button. It includes a label with an input checkbox and an SVG for the check animation.<\/p>\n<p>2. Next, let&#8217;s style our button to make it visually appealing. Create a new file named <code>styles.css<\/code> and copy the provided CSS code into it.<\/p>\n<pre class=\"prettyprint linenums lang-css\">* {\r\n\tborder: 0;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}\r\n:root {\r\n\t--hue: 223;\r\n\t--bg: hsl(var(--hue),90%,90%);\r\n\t--fg: hsl(var(--hue),90%,10%);\r\n\t--trans-dur: 0.3s;\r\n\t--trans-timing: cubic-bezier(0.65,0,0.35,1);\r\n\tfont-size: calc(40px + (80 - 40) * (100vw - 320px) \/ (2560 - 320));\r\n}\r\n\r\nbody,\r\ninput {\r\n\tfont: 1em\/1.5 sans-serif;\r\n}\r\n\r\nbody {\r\n\tbackground-color: var(--bg);\r\n\tcolor: var(--fg);\r\n\tdisplay: grid;\r\n\tplace-items: center;\r\n\theight: 100vh;\r\n\ttransition:\r\n\t\tbackground-color var(--trans-dur),\r\n\t\tcolor var(--trans-dur);\r\n}\r\n.switch,\r\n.switch__input {\r\n\t-webkit-tap-highlight-color: transparent;\r\n}\r\n.switch {\r\n\tposition: relative;\r\n\twidth: 3em;\r\n\theight: 1.5em;\r\n}\r\n.switch__check {\r\n\tdisplay: block;\r\n\ttransform: translateX(0) rotate(0);\r\n\ttransition: transform var(--trans-dur) var(--trans-timing);\r\n\tz-index: 1;\r\n}\r\n.switch__check-line {\r\n\ttransform: translate(0,0);\r\n\ttransition:\r\n\t\tstroke var(--trans-dur) var(--trans-timing),\r\n\t\tstroke-dashoffset var(--trans-dur) var(--trans-timing),\r\n\t\ttransform var(--trans-dur) var(--trans-timing);\r\n}\r\n.switch__input {\r\n\tbackground-color: hsla(var(--hue),90%,50%,0);\r\n\tborder-radius: 1.5em;\r\n\tbox-shadow:\r\n\t\t0 0 0 0.0625em hsl(var(--hue),10%,50%) inset,\r\n\t\t0 0.25em 1em hsla(var(--hue),90%,10%,0);\r\n\tcursor: pointer;\r\n\tdisplay: block;\r\n\toutline: transparent;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\ttransition:\r\n\t\tbackground-color var(--trans-dur) var(--trans-timing),\r\n\t\tbox-shadow var(--trans-dur) var(--trans-timing);\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n}\r\n.switch__input:before,\r\n.switch__input:after {\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n}\r\n.switch__input:before {\r\n\tbackground-color: hsl(0,0%,100%);\r\n\tborder-radius: 50%;\r\n\tbox-shadow: 0 0.125em 0.25em hsla(var(--hue),90%,10%,0);\r\n\ttransition:\r\n\t\tbox-shadow var(--trans-dur) var(--trans-timing),\r\n\t\ttransform var(--trans-dur) var(--trans-timing);\r\n}\r\n.switch__input:after {\r\n\tborder-radius: 0.75em;\r\n\tbox-shadow: 0 0 0 0.125em hsla(var(--hue),90%,70%,0);\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\ttransition: box-shadow 0.15s linear;\r\n}\r\n.switch__input:focus-visible:after {\r\n\tbox-shadow: 0 0 0 0.125em hsla(var(--hue),90%,70%,1);\r\n}\r\n.switch__check,\r\n.switch__input:before {\r\n\tposition: absolute;\r\n\ttop: 0.25em;\r\n\tleft: 0.25em;\r\n\twidth: 1em;\r\n\theight: 1em;\r\n}\r\n.switch__input:checked {\r\n\tbackground-color: hsla(var(--hue),90%,50%,1);\r\n\tbox-shadow:\r\n\t\t0 0 0 0.0625em hsl(var(--hue),90%,50%) inset,\r\n\t\t0 0.25em 1em hsla(var(--hue),90%,10%,0.5);\r\n}\r\n.switch__input:checked:before {\r\n\tbox-shadow: 0 0.125em 0.25em hsla(var(--hue),90%,10%,0.5);\r\n\ttransform: translateX(1.5em);\r\n}\r\n.switch__input:checked + .switch__check {\r\n\tanimation: switch-check var(--trans-dur) var(--trans-timing);\r\n\ttransform: translateX(1.5em) rotate(-225deg);\r\n}\r\n.switch__input:checked + .switch__check .switch__check-line {\r\n\tstroke: hsl(var(--hue),90%,50%);\r\n\tstroke-dashoffset: 0;\r\n\ttransform: translate(-1px,-1px);\r\n\ttransition-delay: 0s, calc(var(--trans-dur) \/ 2), 0s;\r\n}\r\n.switch__sr {\r\n\toverflow: hidden;\r\n\tposition: absolute;\r\n\twidth: 1px;\r\n\theight: 1px;\r\n}\r\n\r\n\/* Dark theme *\/\r\n@media (prefers-color-scheme: dark) {\r\n\t:root {\r\n\t\t--bg: hsl(var(--hue),90%,10%);\r\n\t\t--fg: hsl(var(--hue),90%,90%);\r\n\t}\r\n}\r\n\r\n\/* Animations *\/\r\n@keyframes switch-check {\r\n\tfrom {\r\n\t\ttransform: translateX(0) rotate(0);\r\n\t}\r\n\tto {\r\n\t\ttransform: translateX(1.5em) rotate(135deg);\r\n\t}\r\n}<\/pre>\n<p>Feel free to customize the colors, sizes, or animations according to your preferences. You can modify the CSS variables in the <code>:root<\/code> selector to change the button&#8217;s appearance. The toggle button is now ready to be used to indicate various states or trigger specific actions on your website<\/p>\n<p>That&#8217;s it! You&#8217;ve successfully created a toggle button with a check animation in your web\/app project. Feel free to integrate it into your web projects to add stylish functionality.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This code creates a toggle button with a check animation using HTML and CSS. The button indicates the power status&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":11402,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[97],"tags":[],"class_list":["post-11386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-text-input"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Toggle Button With Check Animation Using HTML CSS &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Toggle Button With Check Animation Using HTML CSS. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Toggle Button With Check Animation Using HTML CSS &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Toggle Button With Check Animation Using HTML CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-21T11:29:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Button-With-Check-Animation-Using-HTML-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Toggle Button With Check Animation Using HTML CSS\",\"datePublished\":\"2024-03-21T11:29:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/\"},\"wordCount\":222,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Button-With-Check-Animation-Using-HTML-CSS.png\",\"articleSection\":[\"Text &amp; Input\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/\",\"url\":\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/\",\"name\":\"Toggle Button With Check Animation Using HTML CSS &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Button-With-Check-Animation-Using-HTML-CSS.png\",\"datePublished\":\"2024-03-21T11:29:31+00:00\",\"description\":\"Here is a free code snippet to create a Toggle Button With Check Animation Using HTML CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Button-With-Check-Animation-Using-HTML-CSS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Button-With-Check-Animation-Using-HTML-CSS.png\",\"width\":1280,\"height\":960,\"caption\":\"Toggle Button With Check Animation Using HTML CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Text &amp; Input\",\"item\":\"https:\/\/codehim.com\/category\/text-input\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Toggle Button With Check Animation Using HTML CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Toggle Button With Check Animation Using HTML CSS &#8212; CodeHim","description":"Here is a free code snippet to create a Toggle Button With Check Animation Using HTML CSS. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/","og_locale":"en_US","og_type":"article","og_title":"Toggle Button With Check Animation Using HTML CSS &#8212; CodeHim","og_description":"Here is a free code snippet to create a Toggle Button With Check Animation Using HTML CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-21T11:29:31+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Button-With-Check-Animation-Using-HTML-CSS.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Toggle Button With Check Animation Using HTML CSS","datePublished":"2024-03-21T11:29:31+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/"},"wordCount":222,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Button-With-Check-Animation-Using-HTML-CSS.png","articleSection":["Text &amp; Input"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/","url":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/","name":"Toggle Button With Check Animation Using HTML CSS &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Button-With-Check-Animation-Using-HTML-CSS.png","datePublished":"2024-03-21T11:29:31+00:00","description":"Here is a free code snippet to create a Toggle Button With Check Animation Using HTML CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Button-With-Check-Animation-Using-HTML-CSS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Button-With-Check-Animation-Using-HTML-CSS.png","width":1280,"height":960,"caption":"Toggle Button With Check Animation Using HTML CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/text-input\/toggle-button-with-check-animation-using-html-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Text &amp; Input","item":"https:\/\/codehim.com\/category\/text-input\/"},{"@type":"ListItem","position":3,"name":"Toggle Button With Check Animation Using HTML CSS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1333,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=11386"}],"version-history":[{"count":3,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11386\/revisions"}],"predecessor-version":[{"id":11425,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11386\/revisions\/11425"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/11402"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=11386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=11386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=11386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}