{"id":1694,"date":"2023-01-18T20:44:47","date_gmt":"2023-01-18T20:44:47","guid":{"rendered":"https:\/\/foolishdeveloper.com\/?p=1694"},"modified":"2023-01-19T05:58:17","modified_gmt":"2023-01-19T05:58:17","slug":"skeuomorphism-button-css","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/skeuomorphism-button-css\/","title":{"rendered":"Skeuomorphism Button Using HTML &amp; CSS (Free Code)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1694\" class=\"elementor elementor-1694\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-180d169 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"180d169\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-839aa6d\" data-id=\"839aa6d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-288c1d8 elementor-widget elementor-widget-text-editor\" data-id=\"288c1d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Do you want to create a <b>CSS Skeuomorphism Button<\/b>? In this article you will know how to create Skeuomorphism Button using html, css and javascript.<\/p><p>Earlier I have created many other types of elements using Skeuomorphism design. Now I will explain how to create <b>Skeuomorphism toggle Button<\/b>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ebbc298 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ebbc298\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-19cf999\" data-id=\"19cf999\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-57af938 elementor-widget elementor-widget-image\" data-id=\"57af938\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"973\" height=\"406\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS.webp\" class=\"attachment-large size-large wp-image-1696\" alt=\"Skeuomorphism Button Using HTML &amp; CSS\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS.webp 973w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-300x125.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-768x320.webp 768w\" sizes=\"(max-width: 973px) 100vw, 973px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3d552d6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3d552d6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-eab4ccd\" data-id=\"eab4ccd\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e01c6e6 elementor-widget elementor-widget-text-editor\" data-id=\"e01c6e6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Earlier I have shared many tutorials using neumorphism and Glassmorphism design like Skeuomorphism design.<\/p><p>Earlier I shared a tutorial on Profile Card, Login Form, Button using Skeuomorphism. <b>Skeuomorphism Button<\/b> is much more interesting than normal button design.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1c87198 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1c87198\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6504268\" data-id=\"6504268\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-42c0068 elementor-widget elementor-widget-heading\" data-id=\"42c0068\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Skeuomorphism  Button CSS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f313b71 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f313b71\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0ad46b1\" data-id=\"0ad46b1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-aa633ae elementor-widget elementor-widget-text-editor\" data-id=\"aa633ae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Skeuomorphism design is much more interesting than normal design. It is created by some shadows in CSS. If you know basic html css and javascript then you can easily create this project(Create Simple Skeuomorphic Buttons in CSS).<\/p><p>Yes you heard right I used a bit of javascript to make this button work. But no need to worry I have explained the complete code used to create this <b>CSS Skeuomorphism button<\/b> step by step.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-473b677 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"473b677\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e07007d\" data-id=\"e07007d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8e614ee elementor-widget elementor-widget-html\" data-id=\"8e614ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"codepen\" data-height=\"365\" data-theme-id=\"light\" data-default-tab=\"result\" data-slug-hash=\"Yzjrepq\" data-preview=\"true\" data-user=\"groundtutorial\" style=\"height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\r\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/groundtutorial\/pen\/Yzjrepq\" target=\"_blank\" rel=\"noopener\">\r\n  Skeuomorphism Button CSS<\/a> by Ground Tutorial (<a href=\"https:\/\/codepen.io\/groundtutorial\" target=\"_blank\" rel=\"noopener\">@groundtutorial<\/a>)\r\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span>\r\n<\/p>\r\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-307cd6a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"307cd6a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-010a01f\" data-id=\"010a01f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d3be534 elementor-widget elementor-widget-text-editor\" data-id=\"d3be534\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you can see above this is a simple on off <b>CSS Skeuomorphism Button<\/b>. First I created a small button inside a box. Where clicking on one side turns it on and clicking on the other side turns it off.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a3c01b4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a3c01b4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a3cf33f\" data-id=\"a3cf33f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d2542c2 elementor-widget elementor-widget-heading\" data-id=\"d2542c2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to Create Skeuomorphic Buttons in HTML CSS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0a9c1d8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0a9c1d8\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1f47c61\" data-id=\"1f47c61\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f67a841 elementor-widget elementor-widget-text-editor\" data-id=\"f67a841\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now if you want to create these <b>Simple Skeuomorphic Buttons using css<\/b> then follow below tutorial. If you only want the source code, use the download button below the article.<\/p><p>But if you are a beginner and want to make this design(Skeuomorphism Button Animation Effects) then follow the step by step tutorial below.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-85ec190 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"85ec190\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-df23e31\" data-id=\"df23e31\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-aa84826 elementor-widget elementor-widget-heading\" data-id=\"aa84826\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 1: Basic Structure of Skeuomorphism Switch<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f376595 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f376595\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e247cfc\" data-id=\"e247cfc\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1bb3fd3 elementor-widget elementor-widget-text-editor\" data-id=\"1bb3fd3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>First I created the basic structure using the HTML and CFS code below. Here I converted the box to <b>Skeuomorphism design<\/b> using height: 6.25em, width: 12.5em and box-shadow.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-712108d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"712108d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8752a9e\" data-id=\"8752a9e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-90b4cfd elementor-widget elementor-widget-code-highlight\" data-id=\"90b4cfd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div class=\"container\" id=\"container\">\r\n\r\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e1fbbdd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e1fbbdd\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5540b25\" data-id=\"5540b25\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c95c16f elementor-widget elementor-widget-code-highlight\" data-id=\"c95c16f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>body {\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n.container {\r\n  font-family: \"Poppins\", sans-serif;\r\n  height: 6.25em;\r\n  width: 12.5em;\r\n  background: linear-gradient(to right, #4b4b4b, #111111);\r\n  border-radius: 12.5em;\r\n  position: absolute;\r\n  transform: translate(-50%, -50%);\r\n  top: 50%;\r\n  left: 50%;\r\n  box-shadow: inset 0.9em 0 0.9em #171717;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-around;\r\n  transition: 0.3s;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d565882 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d565882\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-46977e8\" data-id=\"46977e8\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-49595c5 elementor-widget elementor-widget-image\" data-id=\"49595c5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"973\" height=\"406\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-1.webp\" class=\"attachment-large size-large wp-image-1697\" alt=\"Basic Structure of Skeuomorphism Switch\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-1.webp 973w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-1-300x125.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-1-768x320.webp 768w\" sizes=\"(max-width: 973px) 100vw, 973px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fd5a717 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fd5a717\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7aa02c9\" data-id=\"7aa02c9\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-eedabc2 elementor-widget elementor-widget-heading\" data-id=\"eedabc2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 2: Add radio button by html<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ee0886c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ee0886c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6dddfe8\" data-id=\"6dddfe8\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ec3f7b3 elementor-widget elementor-widget-text-editor\" data-id=\"ec3f7b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now here a radio button is created using <i>type=&#8221;radio&#8221;<\/i> of input. Now here I have added the option of on, then I will add the option of off.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7b28431 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7b28431\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-daf2574\" data-id=\"daf2574\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fcf29eb elementor-widget elementor-widget-code-highlight\" data-id=\"fcf29eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div>\r\n  <input type=\"radio\" id=\"on\" name=\"switch\" \/>\r\n  <label for=\"on\">ON<\/label>\r\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d739b83 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d739b83\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0609cbc\" data-id=\"0609cbc\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-00ee39a elementor-widget elementor-widget-code-highlight\" data-id=\"00ee39a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>input[type=\"radio\"] {\r\n  appearance: none;\r\n  background-color: transparent;\r\n  border: none;\r\n  outline: none;\r\n}\r\nlabel {\r\n  font-size: 1.2em;\r\n  letter-spacing: 0.1em;\r\n  transition: 0.3s;\r\n  cursor: pointer;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d63caa6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d63caa6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b354838\" data-id=\"b354838\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-37297df elementor-widget elementor-widget-image\" data-id=\"37297df\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"973\" height=\"406\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-5.webp\" class=\"attachment-large size-large wp-image-1698\" alt=\"Add radio button by html\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-5.webp 973w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-5-300x125.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-5-768x320.webp 768w\" sizes=\"(max-width: 973px) 100vw, 973px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7c0cfd3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7c0cfd3\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7d606bd\" data-id=\"7d606bd\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a5ab6dd elementor-widget elementor-widget-heading\" data-id=\"a5ab6dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 3: Add another radio button to Skeuomorphism Design<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-78848d6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"78848d6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0f80e2a\" data-id=\"0f80e2a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0fdf9e8 elementor-widget elementor-widget-text-editor\" data-id=\"0fdf9e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you see above ON option is added. Now add the OFF option. Above we have added css so no need to use separate css.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b75dd37 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b75dd37\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-68cfada\" data-id=\"68cfada\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-173eab9 elementor-widget elementor-widget-code-highlight\" data-id=\"173eab9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><div>\r\n  <input type=\"radio\" id=\"off\" name=\"switch\" default \/>\r\n  <label for=\"off\">OFF<\/label>\r\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-14501ea elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"14501ea\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0d70e6c\" data-id=\"0d70e6c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-428855c elementor-widget elementor-widget-image\" data-id=\"428855c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"973\" height=\"406\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-3.webp\" class=\"attachment-large size-large wp-image-1699\" alt=\"Skeuomorphism Button UI Design\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-3.webp 973w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-3-300x125.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-3-768x320.webp 768w\" sizes=\"(max-width: 973px) 100vw, 973px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-617c266 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"617c266\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d048628\" data-id=\"d048628\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7a226a4 elementor-widget elementor-widget-heading\" data-id=\"7a226a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 4: Activate the Skeuomorphism button by JavaScript<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b5a5f3a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b5a5f3a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1826ed6\" data-id=\"1826ed6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bbfc419 elementor-widget elementor-widget-text-editor\" data-id=\"bbfc419\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Above we have done the basic design of this <b>Skeuomorphism Style Switch Button<\/b>. Now we need to activate it by javascript.<\/p><p>When you click on option the button will turn on and some basic color will change. When you click on off, the Skeuomorphism button will turn off and some color will change.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e1d0eb5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e1d0eb5\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4bfb265\" data-id=\"4bfb265\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0e619a9 elementor-widget elementor-widget-text-editor\" data-id=\"0e619a9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>These four lines of code are using JavaScript to select elements from an HTML document. The first line is selecting an element with the ID of &#8220;on&#8221; and assigning it to the variable &#8220;onSwitch&#8221;.\u00a0<\/p><p>The second line is selecting an element with the ID of &#8220;off&#8221; and assigning it to the variable &#8220;offSwitch&#8221;. The third line is selecting a label element that has a &#8220;for&#8221; attribute with the value of &#8220;on&#8221; and assigns it to the variable &#8220;onLabel&#8221;.\u00a0<\/p><p>The fourth line is selecting a label element that has a &#8220;for&#8221; attribute with the value of &#8220;off&#8221; and assigns it to the variable &#8220;offLabel&#8221;.\u00a0<\/p><p>The last line is selecting an element with the ID of &#8220;container&#8221; and assigns it to the variable &#8220;container&#8221;. These elements can then be manipulated or interacted with using JavaScript.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a1ce003 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a1ce003\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c2d98f9\" data-id=\"c2d98f9\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3c88b4b elementor-widget elementor-widget-code-highlight\" data-id=\"3c88b4b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>let onSwitch = document.getElementById(\"on\");\r\nlet offSwitch = document.getElementById(\"off\");\r\nlet onLabel = document.querySelector(\"label[for='on']\");\r\nlet offLabel = document.querySelector(\"label[for='off']\");\r\nlet container = document.getElementById(\"container\");<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0cbfeb5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0cbfeb5\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ad6c797\" data-id=\"ad6c797\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-aecaae2 elementor-widget elementor-widget-text-editor\" data-id=\"aecaae2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This is a JavaScript function called &#8220;onClicked&#8221; which is defined as an arrow function. When this function is called, it will change the box-shadow property of the &#8220;container&#8221; element, it will change the color of the &#8220;offLabel&#8221; element and also the color of the &#8220;onLabel&#8221; element.\u00a0<\/p><p>The box-shadow property will be set to &#8220;inset -0.9em 0 0.9em #494949&#8221; which will create an inset shadow effect with the specified offset, spread and color. The color of the &#8220;offLabel&#8221; element will be set to &#8220;#8e8e8e&#8221; and the color of the &#8220;onLabel&#8221; element will be set to &#8220;#98f195&#8221;. This arrow function can probably be called when the user clicks on the onSwitch element.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1b102cd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1b102cd\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ca56ad0\" data-id=\"ca56ad0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-44e8272 elementor-widget elementor-widget-code-highlight\" data-id=\"44e8272\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>let onClicked = () => {\r\n  container.style.boxShadow = \"inset -0.9em 0 0.9em #494949\";\r\n  offLabel.style.color = \"#8e8e8e\";\r\n  onLabel.style.color = \"#98f195\";\r\n};<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-22b714c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"22b714c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-71466d7\" data-id=\"71466d7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f351f1f elementor-widget elementor-widget-text-editor\" data-id=\"f351f1f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This is another JavaScript function called &#8220;offClicked&#8221; which is also defined as an arrow function. When this function is called, it will change the box-shadow property of the &#8220;container&#8221; element, it will change the color of the &#8220;onLabel&#8221; element and also the color of the &#8220;offLabel&#8221; element.\u00a0<\/p><p>The box-shadow property will be set to <i>&#8220;inset 0.9em 0 0.9em #171717&#8221;<\/i> which will create an inset shadow effect with the specified offset, spread and color. The color of the &#8220;onLabel&#8221; element will be set to &#8220;#8e8e8e&#8221; and the color of the &#8220;offLabel&#8221; element will be set to &#8220;#f1959f&#8221;. This arrow function can probably be called when the user clicks on the offSwitch element.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-519727b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"519727b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0a9bd20\" data-id=\"0a9bd20\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5fc4780 elementor-widget elementor-widget-code-highlight\" data-id=\"5fc4780\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>let offClicked = () => {\r\n  container.style.boxShadow = \"inset 0.9em 0 0.9em #171717\";\r\n  onLabel.style.color = \"#8e8e8e\";\r\n  offLabel.style.color = \"#f1959f\";\r\n};<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f18c7c4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f18c7c4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f15fb84\" data-id=\"f15fb84\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-83e4ef3 elementor-widget elementor-widget-text-editor\" data-id=\"83e4ef3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This code uses the JavaScript <code><i>addEventListener<\/i><\/code> method to attach a function to the &#8220;load&#8221; event of the window object. When the &#8220;load&#8221; event fires, the function checks the state of an HTML element with the id &#8220;onSwitch&#8221; (presumably a checkbox). If the checkbox is checked, the function calls the &#8220;onClicked&#8221; function. If it is not checked, the function calls the &#8220;offClicked&#8221; function.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-794b564 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"794b564\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ce2c7e7\" data-id=\"ce2c7e7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d0b844c elementor-widget elementor-widget-code-highlight\" data-id=\"d0b844c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>window.addEventListener(\"load\", () => {\r\n  if (onSwitch.checked) {\r\n    onClicked();\r\n  } else {\r\n    offClicked();\r\n  }\r\n});<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b81b38e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b81b38e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-957b0ac\" data-id=\"957b0ac\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c79e953 elementor-widget elementor-widget-text-editor\" data-id=\"c79e953\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This code uses the JavaScript <code><i>addEventListener<\/i><\/code> method to attach two event listeners to two different HTML elements with the ids &#8220;onSwitch&#8221; and &#8220;offSwitch&#8221; (presumably two checkboxes).\u00a0<\/p><p>The first listener is attached to the &#8220;click&#8221; event of the <i>&#8220;onSwitch&#8221;<\/i> element and calls the &#8220;onClicked&#8221; function when the checkbox is clicked.\u00a0<\/p><p>The second listener is attached to the &#8220;click&#8221; event of the <i>&#8220;offSwitch&#8221;<\/i> element and calls the &#8220;offClicked&#8221; function when the checkbox is clicked.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fe58edc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fe58edc\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8a5fd8c\" data-id=\"8a5fd8c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-32872a8 elementor-widget elementor-widget-code-highlight\" data-id=\"32872a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>onSwitch.addEventListener(\"click\", onClicked);\r\noffSwitch.addEventListener(\"click\", offClicked);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7f00357 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7f00357\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-602c61b\" data-id=\"602c61b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-60dade0 elementor-widget elementor-widget-image\" data-id=\"60dade0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"973\" height=\"406\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-3-1.webp\" class=\"attachment-large size-large wp-image-1700\" alt=\"Skeuomorphism Button Using HTML &amp; CSS\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-3-1.webp 973w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-3-1-300x125.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Skeuomorphism-Button-CSS-3-1-768x320.webp 768w\" sizes=\"(max-width: 973px) 100vw, 973px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-23066d9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"23066d9\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-43dcf35\" data-id=\"43dcf35\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f6a6cb4 elementor-widget elementor-widget-text-editor\" data-id=\"f6a6cb4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Hope you got to know how I made this project from above tutorial. If you only want the source code then use the download button below to download the full code of <b>Skeuomorphism Switch<\/b>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-58f304e9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"58f304e9\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-20194eb8\" data-id=\"20194eb8\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-21fd25b9 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"21fd25b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/codepen.io\/cpe\/pen\/export\/Yzjrepq\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Source Code<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5c4ea617 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5c4ea617\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-60699cef\" data-id=\"60699cef\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-62bbc81f elementor-widget elementor-widget-toggle\" data-id=\"62bbc81f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"toggle.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-toggle\">\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<div id=\"elementor-tab-title-1651\" class=\"elementor-tab-title\" data-tab=\"1\" role=\"button\" aria-controls=\"elementor-tab-content-1651\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\"><h3>Skeuomorphism Button Animation Effects Using HTML & CSS<\/h3><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1651\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"region\" aria-labelledby=\"elementor-tab-title-1651\"><p>This is a Skeuomorphism Button but I haven&#8217;t added any animation to it. If you want, you can add animations of your choice using css within this design. I&#8217;ll definitely try making the Skeuomorphism Button with Animation Effects next time.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<div id=\"elementor-tab-title-1652\" class=\"elementor-tab-title\" data-tab=\"2\" role=\"button\" aria-controls=\"elementor-tab-content-1652\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\"><h3>Toggle Switch Using HTML \/ CSS \/ SASS<\/h3><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1652\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"region\" aria-labelledby=\"elementor-tab-title-1652\"><p>You can also use this design for a simple toggle switch. But earlier I have shared many tutorials by css only. If you want to create Toggle Switch only by css without javascript then you can follow those tutorials.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<script type=\"application\/ld+json\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"Skeuomorphism Button Animation Effects Using HTML & CSS\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>This is a Skeuomorphism Button but I haven&#8217;t added any animation to it. If you want, you can add animations of your choice using css within this design. I&#8217;ll definitely try making the Skeuomorphism Button with Animation Effects next time.<\\\/p>\"}},{\"@type\":\"Question\",\"name\":\"Toggle Switch Using HTML \\\/ CSS \\\/ SASS\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>You can also use this design for a simple toggle switch. But earlier I have shared many tutorials by css only. If you want to create Toggle Switch only by css without javascript then you can follow those tutorials.<\\\/p>\"}}]}<\/script>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Do you want to create a CSS Skeuomorphism Button? In this article you will know how to create Skeuomorphism Button using html, css and javascript. Earlier I have created many other types of elements using Skeuomorphism design. Now I will explain how to create Skeuomorphism toggle Button. Earlier I have shared many tutorials using neumorphism [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1696,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[15,74,12],"tags":[240],"class_list":["post-1694","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-button","category-button_hover","category-css","tag-skeuomorphism-button","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/1694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=1694"}],"version-history":[{"count":12,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/1694\/revisions"}],"predecessor-version":[{"id":1760,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/1694\/revisions\/1760"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/1696"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=1694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=1694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=1694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}