{"id":14274,"date":"2020-10-10T18:11:02","date_gmt":"2020-10-10T10:11:02","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14274"},"modified":"2025-04-24T17:01:07","modified_gmt":"2025-04-24T09:01:07","slug":"css3-on-off-button","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/","title":{"rendered":"Creating Sleek On\/Off Button with CSS3"},"content":{"rendered":"

Using a button is, so far, the preferred way to interact with electronic devices, such as radios, TVs, music players, and even a smartphone<\/a> that has a voice command feature<\/a> still needs at least one or two physical buttons.<\/p>\n

Furthermore, in this digital age, the button<\/strong> has evolved in its digital form as well, making it more interactive, dynamic, and easy to create compared to the physical button.<\/p>\n

So, this time, we are going to create a slick and interactive button based on this excellent design<\/a> over at Dribbble using only CSS<\/a>.<\/p>\n

Well, let\u2019s get started.<\/p>\n

HTML<\/h2>\n

We will start by placing the following markup in our HTML<\/a> document. It\u2019s quite simple: the button is based on an anchor tag, with a span<\/code> next to it to create the indicator light. They are wrapped together within an HTML5<\/a> section<\/code> tag.<\/p>\n

\r\n<section>\r\n    <a href=\"#button\" id=\"button\"><\/a>\r\n    <span><\/span>\r\n<\/section>\r\n<\/pre>\n
Here is how our button initially looks.<\/p>\n
\"CSS3<\/figure>\n
Basic Styling<\/h2>\n
In this section, we will start working on the Styles<\/strong>.<\/p>\n
First, we apply this dark background<\/a> from Subtle Pattern to the body\u2019s document and center the section<\/code>. Then, we will also remove the dotted outline<\/code> upon the :focus<\/code> and :active<\/code> link states.<\/p>\n
\r\nbody {\r\n    background: url('images\/micro_carbon.png');\r\n}\r\n\r\nsection {\r\n    margin: 150px auto 0;\r\n    width: 75px;\r\n    height: 95px;\r\n    position: relative;\r\n    text-align: center;\r\n}\r\n\r\n:active, :focus {\r\n    outline: 0;\r\n}\r\n<\/pre>\n
Using Custom Font<\/h3>\n
For the button\u2019s icon, we will use a custom font from Font Awesome<\/a> rather than an image. This way, the icon will be easily style-able and scalable through the stylesheet.<\/p>\n
Download the font<\/a>, store the font files (eot, woff, ttf, and svg) in the fonts<\/strong> folder, and then place the following code in your stylesheet to define a new font family.<\/p>\n
\r\n@font-face {\r\n    font-family: \"FontAwesome\";\r\n    src: url(\"fonts\/fontawesome-webfont.eot\");\r\n    src: url(\"fonts\/fontawesome-webfont.eot?#iefix\") format('eot'),\r\n         url(\"fonts\/fontawesome-webfont.woff\") format('woff'),\r\n         url(\"fonts\/fontawesome-webfont.ttf\") format('truetype'),\r\n         url(\"fonts\/fontawesome-webfont.svg#FontAwesome\") format('svg');\r\n    font-weight: normal;\r\n    font-style: normal;\r\n}\r\n<\/pre>\n
\"Font<\/figure>\n
The power icon<\/strong> we need for this button is represented by the Unicode<\/a> number F011<\/strong>. If you look closely at the HTML markup above, we have put this numeric character reference <\/code> within the anchor tag, but since we haven\u2019t defined the custom font-family<\/code> in the button style yet, the icon is not rendered correctly.<\/p>\n
Further reading:<\/strong> Unicode and HTML: Document Characters<\/a><\/p>\n
Styling the Button<\/h3>\n
First, we need to define the custom font-family<\/code> for the button.<\/p>\n
Our button will be a circle. We can achieve this effect using the border-radius<\/code> property and setting the value to at least half of the button\u2019s width<\/code>.<\/p>\n
Since we are using a font for the icon, we can easily set the color<\/code> and add text-shadow<\/code> for the icon in the stylesheet as well.<\/p>\n
Next, we will create a beveled effect for the button. This effect is quite tricky. First, we apply background-color: rgb(83,87,93);<\/code> for the button\u2019s base color, then we add up to four layers of box-shadows<\/code>.<\/p>\n
\"CSS3<\/figure>\n
\r\na {\r\nfont-family: \"FontAwesome\";\r\ncolor: rgb(37,37,37);\r\ntext-shadow: 0px 1px 1px rgba(250,250,250,0.1);\r\nfont-size: 32pt;\r\ndisplay: block;\r\nposition: relative;\r\ntext-decoration: none;\r\nbackground-color: rgb(83,87,93);\r\nbox-shadow: 0px 3px 0px 0px rgb(34,34,34), \/* 1st Shadow *\/\r\n0px 7px 10px 0px rgb(17,17,17), \/* 1nd Shadow *\/\r\ninset 0px 1px 1px 0px rgba(250, 250, 250, .2), \/* 3rd Shadow *\/\r\ninset 0px -12px 35px 0px rgba(0, 0, 0, .5); \/* 4th Shadow *\/\r\nwidth: 70px;\r\nheight: 70px;\r\nborder: 0;\r\nborder-radius: 35px;\r\ntext-align: center;\r\nline-height: 79px;\r\n}\r\n<\/pre>\n
There is also a larger circle outside the button, and we will use the :before<\/code> pseudo-element<\/em> for it rather than adding extra markup.<\/p>\n
\"Button<\/figure>\n
\r\na:before {\r\n    content: \"\";\r\n    width: 80px;\r\n    height: 80px;\r\n    display: block;\r\n    z-index: -2;\r\n    position: absolute;\r\n    background-color: rgb(26,27,29);\r\n    left: -5px;\r\n    top: -2px;\r\n    border-radius: 40px;\r\n    box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),\r\n                inset 0px 1px 2px rgba(0, 0, 0, 0.5);\r\n}\r\n<\/pre>\n
Further reading:<\/strong> CSS :before and :after pseudo-elements (Hongkiat.com)<\/a><\/p>\n
Indicator Light<\/h3>\n
Under the button, there is a tiny light to designate the Power On and Off status. Below, we apply red for the light\u2019s color because the power is initially OFF. We also add box-shadow<\/code> to imitate the gleam effect of the light.<\/p>\n
\"Red<\/figure>\n
\r\na + span {\r\n    display: block;\r\n    width: 8px;\r\n    height: 8px;\r\n    background-color: rgb(226,0,0);\r\n    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),\r\n                0px 0px 3px 2px rgba(226,0,0,0.5);\r\n    border-radius: 4px;\r\n    clear: both;\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 42%;\r\n}\r\n<\/pre>\n
The Effect<\/h2>\n
At this point, our button starts looking good, and we only need to add some effects. For instance, when the button is \u2018being\u2019 clicked, we want it to look like it\u2019s being pressed and held down.<\/p>\n
To achieve this effect, the first box-shadow<\/code> on the button will be zeroed out, and its position will be lowered slightly. We also need to adjust the intensities of the other three shadows a little to match the button\u2019s new position.<\/p>\n
\"Button<\/figure>\n
\r\na:active {\r\n    box-shadow: 0px 0px 0px 0px rgb(34,34,34), \/* 1st Shadow *\/\r\n                0px 3px 7px 0px rgb(17,17,17), \/* 2nd Shadow *\/\r\n                inset 0px 1px 1px 0px rgba(250, 250, 250, .2), \/* 3rd Shadow *\/\r\n                inset 0px -10px 35px 5px rgba(0, 0, 0, .5); \/* 4th Shadow *\/\r\n    background-color: rgb(83,87,93);\r\n    top: 3px;\r\n}\r\n<\/pre>\n
Furthermore, once the button has been clicked, it should remain pressed down, and the icon should \u2018shine\u2019 to indicate that the power is ON.<\/p>\n
To achieve such an effect, we will target the button using the :target<\/code> pseudo-class<\/em>, then change the icon\u2019s color to white and add a white text-shadow<\/code> as well.<\/p>\n
\"Button<\/figure>\n
\r\na:target {\r\n    box-shadow: 0px 0px 0px 0px rgb(34,34,34),\r\n                0px 3px 7px 0px rgb(17,17,17),\r\n                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),\r\n                inset 0px -10px 35px 5px rgba(0, 0, 0, .5);\r\n    background-color: rgb(83,87,93);\r\n    top: 3px;\r\n    color: #fff;\r\n    text-shadow: 0px 0px 3px rgb(250,250,250);\r\n}\r\n<\/pre>\n
Further reading:<\/strong> Using :target pseudo-class<\/a><\/p>\n
We also need to adjust the box-shadow<\/code> in the circle outside the button, as follows.<\/p>\n
\r\na:active:before, a:target:before {\r\n    top: -5px;\r\n    background-color: rgb(26,27,29);\r\n    box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),\r\n                inset 0px 1px 2px rgba(0, 0, 0, 0.5);\r\n}\r\n<\/pre>\n
The light indicator will turn from the default red to green to emphasize that the power is already ON.<\/p>\n
\"Green<\/figure>\n
\r\na:target + span {\r\n    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),\r\n                0px 0px 3px 2px rgba(135,187,83,0.5);\r\n    background-color: rgb(135,187,83);\r\n}\r\n<\/pre>\n
Transition Effect<\/h3>\n
Lastly, to make the button\u2019s effect run smoothly, we will also apply the following transition effect.<\/p>\n
This snippet below will specifically add the transition to the color<\/code> and text-shadow<\/code> properties for 350ms<\/code> in the anchor element.<\/p>\n
\r\na {\r\n    transition: color 350ms, text-shadow 350ms;\r\n    -o-transition: color 350ms, text-shadow 350ms;\r\n    -moz-transition: color 350ms, text-shadow 350ms;\r\n    -webkit-transition: color 350ms, text-shadow 350ms;\r\n}\r\n<\/pre>\n
This second snippet below will add the transition for the background-color<\/code> and box-shadow<\/code> properties in the light indicator.<\/p>\n
\r\na:target + span {\r\n    transition: background-color 350ms, box-shadow 700ms;\r\n    -o-transition: background-color 350ms, box-shadow 700ms;\r\n    -moz-transition: background-color 350ms, box-shadow 700ms;\r\n    -webkit-transition: background-color 350ms, box-shadow 700ms;\r\n}\r\n<\/pre>\n
Final Result<\/h2>\n
We have covered all the styles needed. Now you can see the final result live and download the source file from the links below.<\/p>\n
\n  Demo<\/a>\n  Download Source<\/a>\n<\/div>\n
Bonus: How to turn it off<\/h2>\n
Here comes the bonus. If you have tried the button from the demo above, you\u2019ve noticed that it can only be clicked once (to turn it on). So how do we turn it off?<\/p>\n
Unfortunately, we have to use jQuery for this, but it\u2019s really simple. Below is all the jQuery code needed.<\/p>\n
\r\n$(document).ready(function() {\r\n    $('#button').click(function() {\r\n        $(this).toggleClass('on');\r\n    });\r\n});\r\n<\/pre>\n
The snippet above will add the class ON<\/code> to the anchor tag using jQuery\u2019s toggleClass<\/code> function. When the #button<\/code> is clicked, jQuery checks if the ON<\/code> class has been added. If not, it adds the class; if it has, jQuery removes the class.<\/p>\n
Note:<\/strong> Don\u2019t forget to include the jQuery library.<\/p>\n
Now we have to change the Style slightly. Simply replace all instances of the :target<\/code> pseudo-class<\/em> with the .on<\/code> class selector, as follows:<\/p>\n
\r\na.on {\r\n    box-shadow: 0px 0px 0px 0px rgb(34,34,34),\r\n                0px 3px 7px 0px rgb(17,17,17),\r\n                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),\r\n                inset 0px -10px 35px 5px rgba(0, 0, 0, .5);\r\n    background-color: rgb(83,87,93);\r\n    top: 3px;\r\n    color: #fff;\r\n    text-shadow: 0px 0px 3px rgb(250,250,250);\r\n}\r\n\r\na:active:before, a.on:before {\r\n    top: -5px;\r\n    background-color: rgb(26,27,29);\r\n    box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),\r\n                inset 0px 1px 2px rgba(0, 0, 0, 0.5);\r\n}\r\n\r\na.on + span {\r\n    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),\r\n                0px 0px 3px 2px rgba(135,187,83,0.5);\r\n    background-color: rgb(135,187,83);\r\n}\r\n<\/pre>\n
Finally, let\u2019s try it in the browser.<\/p>\n
\n  Demo<\/a>\n  Download Source<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"
Using a button is, so far, the preferred way to interact with electronic devices, such as radios, TVs, music players, and even a smartphone that has a voice command feature still needs at least one or two physical buttons. Furthermore, in this digital age, the button has evolved in its digital form as well, making…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[298,507,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCreating Sleek On\/Off Button with CSS3 - Hongkiat<\/title>\n<meta name=\"description\" content=\"Using a button is, so far, the preferred way to interact with electronic devices, such as radios, TVs, music players, and even a smartphone that has a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Sleek On\/Off Button with CSS3\" \/>\n<meta property=\"og:description\" content=\"Using a button is, so far, the preferred way to interact with electronic devices, such as radios, TVs, music players, and even a smartphone that has a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-10T10:11:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:01:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-on-off-button\/initial-look.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-on-off-button\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-on-off-button\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Creating Sleek On\\\/Off Button with CSS3\",\"datePublished\":\"2020-10-10T10:11:02+00:00\",\"dateModified\":\"2025-04-24T09:01:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-on-off-button\\\/\"},\"wordCount\":883,\"commentCount\":28,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-on-off-button\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-on-off-button\\\/initial-look.jpg\",\"keywords\":[\"Buttons\",\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-on-off-button\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-on-off-button\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-on-off-button\\\/\",\"name\":\"Creating Sleek On\\\/Off Button with CSS3 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-on-off-button\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-on-off-button\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-on-off-button\\\/initial-look.jpg\",\"datePublished\":\"2020-10-10T10:11:02+00:00\",\"dateModified\":\"2025-04-24T09:01:07+00:00\",\"description\":\"Using a button is, so far, the preferred way to interact with electronic devices, such as radios, TVs, music players, and even a smartphone that has a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-on-off-button\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-on-off-button\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-on-off-button\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-on-off-button\\\/initial-look.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-on-off-button\\\/initial-look.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-on-off-button\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Sleek On\\\/Off Button with CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating Sleek On\/Off Button with CSS3 - Hongkiat","description":"Using a button is, so far, the preferred way to interact with electronic devices, such as radios, TVs, music players, and even a smartphone that has a","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:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/","og_locale":"en_US","og_type":"article","og_title":"Creating Sleek On\/Off Button with CSS3","og_description":"Using a button is, so far, the preferred way to interact with electronic devices, such as radios, TVs, music players, and even a smartphone that has a","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-10-10T10:11:02+00:00","article_modified_time":"2025-04-24T09:01:07+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-on-off-button\/initial-look.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Creating Sleek On\/Off Button with CSS3","datePublished":"2020-10-10T10:11:02+00:00","dateModified":"2025-04-24T09:01:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/"},"wordCount":883,"commentCount":28,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-on-off-button\/initial-look.jpg","keywords":["Buttons","CSS","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/","name":"Creating Sleek On\/Off Button with CSS3 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-on-off-button\/initial-look.jpg","datePublished":"2020-10-10T10:11:02+00:00","dateModified":"2025-04-24T09:01:07+00:00","description":"Using a button is, so far, the preferred way to interact with electronic devices, such as radios, TVs, music players, and even a smartphone that has a","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-on-off-button\/initial-look.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-on-off-button\/initial-look.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Sleek On\/Off Button with CSS3"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3Ie","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14274","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=14274"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14274\/revisions"}],"predecessor-version":[{"id":74083,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14274\/revisions\/74083"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14274"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}