{"id":2467,"date":"2016-03-07T13:20:31","date_gmt":"2016-03-07T16:20:31","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=2467"},"modified":"2021-12-30T09:09:49","modified_gmt":"2021-12-30T12:09:49","slug":"criando-botao-estilo-interruptor-com-css3","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/criando-botao-estilo-interruptor-com-css3\/","title":{"rendered":"Criando bot\u00e3o estilo interruptor com CSS3"},"content":{"rendered":"<p>Muitas vezes desejamos personalizar nossos formul\u00e1rios para fazer alternativas cada vez mais amig\u00e1veis para os usu\u00e1rios. Um item que fica interessante um bot\u00e3o do estilo interruptor para ativar e desativar algo.<\/p>\n<p>Nesse tutorial,\u00a0criaremos\u00a0um bot\u00e3o estilo interruptor, onde mostrar como OFF e ON, quando voc\u00ea clica, utilizando o CSS3.<\/p>\n<p>Vamos come\u00e7ar pelo html:<\/p>\n<pre class=\"lang:xhtml decode:true \"> &lt;div class=\"switch\"&gt;\r\n    &lt;input type=\"checkbox\" name=\"option\" id=\"option\" \/&gt;\r\n    &lt;label for=\"option\"&gt;&lt;span&gt;&lt;\/span&gt;&lt;\/label&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Criamos uma<strong> div.switch<\/strong> que engloba o nosso bot\u00e3o, e dentro da div, temos input, pra fazer o efeito de marcar bot\u00e3o, como ligado e desligado. E tamb\u00e9m vamos adicionar label, pra definir o corpo do bot\u00e3o, e o span que ser\u00e1 o interruptor.<\/p>\n<p>No CSS, vamos usar pseudo-classe before (antes), after (depois), e conjunto com a propriedade content, para adicionar um conte\u00fado dos elementos. Vamos utilizar tamb\u00e9m, background gradiente linear, sua sintaxe seria assim:<\/p>\n<pre class=\"lang:css decode:true \">background: linear-gradient(COR INICIAL, COR FINAL);<\/pre>\n<p>Vamos agora o CSS.<\/p>\n<h4>CONFIGURAR A DIV.SWITCH QUE SER\u00c1 O NOSSO BOT\u00c3O<\/h4>\n<pre class=\"lang:css decode:true \">.switch{\r\n    width:180px;\r\n    height:50px;\r\n    margin:0 auto;\r\n    position:relative;\r\n}<\/pre>\n<ul>\n<li>Define a largura (<strong>width<\/strong>) e altura(height);<\/li>\n<li>Centraliza na horizontal (<strong>margin:0 auto)<\/strong>;<\/li>\n<li>Define <strong>position:relative<\/strong>, delimitando o espa\u00e7o,\u00a0dos elementos filhos que utilizar<strong>position:absolute<\/strong>;<\/li>\n<\/ul>\n<h4>VAMOS CONFIGURAR AGORA O INPUT:CHECKBOX.<\/h4>\n<div>\n<pre class=\"lang:css decode:true \">.switch input{\r\n    display:block;\r\n    width:100%;\r\n    height: 100%;\r\n \r\n    position:absolute;\r\n    top:0;\r\n    left:0;\r\n    z-index: 10;\r\n \r\n    opacity: 0;\r\n    cursor: pointer;\r\n \r\n}<\/pre>\n<ul>\n<li>Alterar para <strong>display:block<\/strong>, para ocupar todo o espa\u00e7o,\u00a0definido pelo elemento Pai;<\/li>\n<li>Define a largura (<strong>width<\/strong>) e altura(<strong>height<\/strong>);<\/li>\n<li>Define <strong>position:absolute;<\/strong><\/li>\n<li>Define <strong>top<\/strong> e <strong>left<\/strong> como <strong>0<\/strong> (zero);<\/li>\n<li>Define<strong> z-index:10<\/strong> para sobrepor a todos os elementos;<\/li>\n<li>Define <strong>opacity:0<\/strong> para ocultar o input;<\/li>\n<li>Define<strong> cursos:pointer<\/strong>, para aparecer cursor de link.<\/li>\n<\/ul>\n<h4>CONFIGURA O LABEL, QUE SER\u00c1 O ESPA\u00c7O INTERNO DO BOT\u00c3O.<\/h4>\n<pre class=\"lang:css decode:true \">.switch label{\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n \r\n    background: -moz-linear-gradient(#750000, #B20000);\r\n    background: -ms-linear-gradient(#750000, #B20000);\r\n    background: -o-linear-gradient(#750000, #B20000);\r\n    background: -webkit-linear-gradient(#750000, #B20000);\r\n    background: linear-gradient(#750000, #B20000);\r\n \r\n    border-radius: 40px;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<ul>\n<li>Alterar para <strong>display:block<\/strong>, para ocupar todo o espa\u00e7o,\u00a0definido pelo elemento Pai;<\/li>\n<li>Define a largura (<strong>width<\/strong>) e altura(<strong>height<\/strong>);<\/li>\n<li>Define um background gradiente (linear), utilizamos\u00a0os prefixos pra funcionar nos navegadores (-moz, -ms, -o, -webkit);<\/li>\n<li>Define os cantos arredondados;<\/li>\n<\/ul>\n<\/div>\n<div>\n<h4>IREMOS ADICIONAR UM ELEMENTO DEPOIS DO LABEL, PARA O EFEITO DA BORDA.<\/h4>\n<pre class=\"lang:css decode:true\">.switch label:after{\r\n    content: \"\";\r\n \r\n    position: absolute;\r\n    top: -10px;\r\n    right: -10px;\r\n    bottom: -10px;\r\n    left: -10px;\r\n     z-index: -1;\r\n \r\n    background: -moz-linear-gradient(#EEEEEE, #AAAAAA);\r\n    background: -ms-linear-gradient(#EEEEEE, #AAAAAA);\r\n    background: -o-linear-gradient(#EEEEEE, #AAAAAA);\r\n    background: -webkit-linear-gradient(#EEEEEE, #AAAAAA);\r\n    background: linear-gradient(#EEEEEE, #AAAAAA);\r\n \r\n    border-radius: inherit;\r\n \r\n}<\/pre>\n<ul>\n<li>Adiciona um conte\u00fado vazio com <strong>content;<\/strong><\/li>\n<li>Define <strong>position:abolute;<\/strong><\/li>\n<li>Define <strong>top, left, right, bottom -10px<\/strong>, pra definir espessura da borda;<\/li>\n<li>Define <strong>z-index:-1<\/strong>, para ficar atr\u00e1s de todos os elementos;<\/li>\n<li>Define um background gradiente linear;<\/li>\n<li>Define <strong>border-radius: inherit<\/strong>, pra utilizar a configura\u00e7\u00e3o do elemento pai,\u00a0que no caso ser\u00e1<strong>40px.<\/strong><\/li>\n<\/ul>\n<h4>CONFIGURA O ELEMENTO <strong>SPAN<\/strong>, PARA O EFEITO DO INTERRUPTOR<\/h4>\n<div>\n<pre class=\"lang:css decode:true \">.switch label span{\r\n  display: block;\r\n  width: 60%;\r\n  height: 100%;\r\n  background: #C0C0C0;\r\n \r\n  position: absolute;\r\n  z-index: 2;\r\n  right: 41%;\r\n  top: 0;\r\n \r\n  background: -moz-linear-gradient(#E0E0E0, #A0A0A0);\r\n  background: -ms-linear-gradient(#E0E0E0, #A0A0A0);\r\n  background: -o-linear-gradient(#E0E0E0, #A0A0A0);\r\n  background: -webkit-linear-gradient(#E0E0E0, #A0A0A0);\r\n  background: linear-gradient(#E0E0E0, #A0A0A0);\r\n \r\n  border-radius: inherit;\r\n \r\n}<\/pre>\n<ul>\n<li>Altera o <strong>display pra block<\/strong>, pra definimos altura e largura ;<\/li>\n<li>Define largura (<strong>width<\/strong>) e altura (<strong>height<\/strong>);<\/li>\n<li>Define <strong>position:absolute<\/strong>, para posicionar de acordo com elemento pai;<\/li>\n<li>Define o<strong> z-index:2<\/strong> pra sobre a borda do bot\u00e3o;<\/li>\n<li>Define um <strong>background gradiente linear<\/strong>;<\/li>\n<li>Define <strong>border-radius: inherit<\/strong>, pra utilizar a configura\u00e7\u00e3o do elemento pai,que no caso ser\u00e1 40px.<\/li>\n<\/ul>\n<h4>CONFIGURA O ITEM DO CENTRO DO INTERRUPTOR.<\/h4>\n<pre class=\"lang:css decode:true \">.switch label span:after {\r\n  content: \"\";\r\n \r\n  position: absolute;\r\n  left: 15%;\r\n  top: 25%;\r\n \r\n  width: 70%;\r\n  height: 50%;\r\n \r\n  background: -moz-linear-gradient(#F7F7F7, #CCCCCC);\r\n  background: -ms-linear-gradient(#F7F7F7, #CCCCCC);\r\n  background: -o-linear-gradient(#F7F7F7, #CCCCCC);\r\n  background: -webkit-linear-gradient(#F7F7F7, #CCCCCC);\r\n  background: linear-gradient(#F7F7F7, #CCCCCC);\r\n  border-radius: inherit;\r\n}<\/pre>\n<ul>\n<li>Adiciona um conte\u00fado vazio com <strong>content<\/strong>;<\/li>\n<li>Define um <strong>position:absolute<\/strong>, para posicionar esse elemento;<\/li>\n<li>Define as dimens\u00f5es (largura e altura) do centro do interruptor;<\/li>\n<li>Define um <strong>background gradiente<\/strong> (linear);<\/li>\n<li>Define <strong>border-radius: inherit<\/strong>, pra utilizar a configura\u00e7\u00e3o do elemento pai,\u00a0que no caso ser\u00e1 40px;<\/li>\n<\/ul>\n<h4>VAMOS ADICIONAR TEXTO DENTRO DO BOT\u00c3O QUANDO ESTIVER DESLIGADO.<\/h4>\n<p>Usaremos\u00a0a pseudo-classe :<strong>before,<\/strong> para adicionar o conte\u00fado antes do span, com o <strong>content<\/strong>;<\/p>\n<pre class=\"lang:css decode:true \">.switch label span:before {\r\n content: \"off\";\r\n \r\n position: absolute;\r\n top: 50%;\r\n margin-top: -12px;\r\n right: -50%;\r\n \r\n text-transform: uppercase;\r\n font-weight: bold;\r\n font-family: Arial, sans-serif;\r\n font-size: 24px;\r\n \r\n color: #fff;\r\n \r\n}<\/pre>\n<ul>\n<li>Adiciona o texto \u00a0<strong>off, <\/strong>com o<strong> content<\/strong>;<\/li>\n<li>Define o <strong>position:absolute<\/strong>, posicionar o elemento;<\/li>\n<li>Define que fique<strong> 50% do topo<\/strong>;<\/li>\n<li>Define o <strong>margin-top:-12px<\/strong> para centralizar na vertical;<\/li>\n<li>Define que fique<strong> -50%<\/strong> para <strong>direita<\/strong>;<\/li>\n<li>Define que ficar letra em mai\u00fasculo;<\/li>\n<li>Define a fonte em negrito;<\/li>\n<li>Define a fam\u00edlia da fonte como Arial;<\/li>\n<li>Define o tamanho da fonte como 24px;<\/li>\n<li>Define a cor do texto branca;<\/li>\n<\/ul>\n<h4>\u00a0CONFIGURA A COR DO ELEMENTO QUANDO DESLIGAR O BOT\u00c3O.<\/h4>\n<div>\u00a0Por padr\u00e3o ele come\u00e7a ligado, com a cor vermelha aparecendo, agora vamos adicionar a cor verde, de ligado, quando desligar o bot\u00e3o. \u00a0Selecionaremos o elemento label, precedito (~) quando o input estiver marcado (:checked);<\/div>\n<div>\n<pre class=\"lang:css decode:true \">.switch input:checked ~ label {\r\n \r\n  background: -moz-linear-gradient(#004010, #1A6600);\r\n  background: -ms-linear-gradient(#004010, #1A6600);\r\n  background: -o-linear-gradient(#004010, #1A6600);\r\n  background: -webkit-linear-gradient(#004010, #1A6600);\r\n  background: linear-gradient(#004010, #1A6600);\r\n}<\/pre>\n<ul>\n<li>Define o background gradiente linear (cor vermelha);<\/li>\n<\/ul>\n<h4>AFASTAR INTERRUPTOR PARA DIREITA, EFEITO DESLIGADO.<\/h4>\n<p>Selecionaremos o elemento span dentro do label, precedito (~) quando o input estiver marcado (:checked);<\/p>\n<div><\/div>\n<pre class=\"lang:css decode:true \">.switch input:checked ~ label span{\r\n  right: -2px;\r\n}<\/pre>\n<ul>\n<li>Define \u00a0-2px para direita.<\/li>\n<\/ul>\n<h4>ADICIONAREMOS CONTE\u00daDO <strong>ON<\/strong>, PRA MOSTRA QUANDO ESTIVER O EFEITO DESLIGADO.<\/h4>\n<p>Selecionaremos o elemento span:before dentro do label, precedito (~) quando o input estiver marcado (:checked);<\/p>\n<pre class=\"lang:css decode:true \">.switch input:checked ~ label span:before {\r\n  content: \"on\";\r\n  right: 115%;\r\n}<\/pre>\n<ul>\n<li>Adiciona o conte\u00fado On, com <strong>content<\/strong>;<\/li>\n<li>Afasta da direita 115%;<\/li>\n<\/ul>\n<h4>VAMOS A TODO CSS DO EFEITO DO BOT\u00c3O ESTILO INTERRUPTOR.<\/h4>\n<div>\n<pre class=\"lang:css decode:true\">.switch{\r\n    width:180px;\r\n    height:50px;\r\n    margin:0 auto;\r\n    position:relative;\r\n \r\n}\r\n \r\n.switch input{\r\n    display:block;\r\n    width:100%;\r\n    height: 100%;\r\n \r\n    position:absolute;\r\n    top:0;\r\n    left:0;\r\n    z-index: 10;\r\n \r\n    opacity: 0;\r\n    cursor: pointer;\r\n \r\n}\r\n \r\n.switch label{\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n \r\n    background: -moz-linear-gradient(#750000, #B20000);\r\n    background: -ms-linear-gradient(#750000, #B20000);\r\n    background: -o-linear-gradient(#750000, #B20000);\r\n    background: -webkit-linear-gradient(#750000, #B20000);\r\n    background: linear-gradient(#750000, #B20000);\r\n \r\n    border-radius: 40px;\r\n}\r\n \r\n.switch label:after{\r\n    content: \"\";\r\n \r\n    position: absolute;\r\n    top: -10px;\r\n    right: -10px;\r\n    bottom: -10px;\r\n    left: -10px;\r\n    z-index: -1;\r\n \r\n    background: -moz-linear-gradient(#EEEEEE, #AAAAAA);\r\n    background: -ms-linear-gradient(#EEEEEE, #AAAAAA);\r\n    background: -o-linear-gradient(#EEEEEE, #AAAAAA);\r\n    background: -webkit-linear-gradient(#EEEEEE, #AAAAAA);\r\n    background: linear-gradient(#EEEEEE, #AAAAAA);\r\n \r\n    border-radius: inherit;\r\n \r\n}\r\n \r\n.switch label span{\r\n    display: block;\r\n    width: 60%;\r\n    height: 100%;\r\n    background: #C0C0C0;\r\n \r\n    position: absolute;\r\n    z-index: 2;\r\n    right: 41%;\r\n    top: 0;\r\n \r\n    background: -moz-linear-gradient(#E0E0E0, #A0A0A0);\r\n    background: -ms-linear-gradient(#E0E0E0, #A0A0A0);\r\n    background: -o-linear-gradient(#E0E0E0, #A0A0A0);\r\n    background: -webkit-linear-gradient(#E0E0E0, #A0A0A0);\r\n    background: linear-gradient(#E0E0E0, #A0A0A0);\r\n \r\n    border-radius: inherit;\r\n \r\n}\r\n \r\n.switch label span:after {\r\n    content: \"\";\r\n \r\n    position: absolute;\r\n    left: 15%;\r\n    top: 25%;\r\n \r\n    width: 70%;\r\n    height: 50%;\r\n \r\n    background: -moz-linear-gradient(#F7F7F7, #CCCCCC);\r\n    background: -ms-linear-gradient(#F7F7F7, #CCCCCC);\r\n    background: -o-linear-gradient(#F7F7F7, #CCCCCC);\r\n    background: -webkit-linear-gradient(#F7F7F7, #CCCCCC);\r\n    background: linear-gradient(#F7F7F7, #CCCCCC);\r\n    border-radius: inherit;\r\n}\r\n \r\n.switch label span:before {\r\n    content: \"off\";\r\n \r\n    position: absolute;\r\n    top: 50%;\r\n    margin-top: -12px;\r\n    right: -50%;\r\n \r\n    text-transform: uppercase;\r\n    font-weight: bold;\r\n    font-family: Arial, sans-serif;\r\n    font-size: 24px;\r\n \r\n    color: #fff;\r\n \r\n}\r\n \r\n.switch input:checked ~ label {\r\n \r\n    background: -moz-linear-gradient(#004010, #1A6600);\r\n    background: -ms-linear-gradient(#004010, #1A6600);\r\n    background: -o-linear-gradient(#004010, #1A6600);\r\n    background: -webkit-linear-gradient(#004010, #1A6600);\r\n    background: linear-gradient(#004010, #1A6600);\r\n}\r\n \r\n.switch input:checked ~ label span{\r\n    right: -2px;\r\n}\r\n \r\n.switch input:checked ~ label span:before {\r\n    content: \"on\";\r\n    right: 115%;\r\n \r\n}<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<p>Agora vamos ver o efeito em funcionamento: <a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/03\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Clique Aqui<\/a><\/p>\n<p>Se voc\u00ea deseja conhecer mais sobre os poderes do CSS3, temos um curso sobe medida pra voc\u00ea.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Muitas vezes desejamos personalizar nossos formul\u00e1rios para fazer alternativas cada vez mais amig\u00e1veis para os usu\u00e1rios. Um item que fica interessante um bot\u00e3o do estilo interruptor para ativar e desativar algo. Nesse tutorial,\u00a0criaremos\u00a0um bot\u00e3o estilo interruptor, onde mostrar como OFF e ON, quando voc\u00ea clica, utilizando o CSS3. Vamos come\u00e7ar pelo html: &lt;div class=&#8221;switch&#8221;&gt; &lt;input [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":2468,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[],"class_list":["post-2467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/2467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=2467"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/2467\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/2468"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=2467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=2467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=2467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}