Caixinha de Ask e Submit com cores diferentes no tema
Este é um método bem simples de fazer com que as caixinhas de Ask e Submit apareçam com cores diferentes no tema. Mas ele é um pouco limitado, os efeitos que eu estou disponibilizando aqui são os únicos que ficam bons (pelo menos na minha opinião) utilizando esse método.
Nâo esqueça de dar like ou reblogar este post se ele for útil.
Escolha a seguir a cor que você quer, copie o código do efeito e cole-o no CSS personalizado do seu tema, ou então abra o HTML do seu tema e cole ele antes </style> (você pode apertar CTRL+F na página do código para pesquisar por </style>).
Branco com cinza:
/*** ask & submit personalizados: Branco com cinza ***/ #ask_form, #submit_form {transition: .9s; filter: grayscale(100%); -webkit-filter: grayscale(100%); } #ask_form:hover, #submit_form:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); } /*** ask & submit personalizados: Branco com cinza ***/
Branco com roxo:
/*** ask & submit personalizados: Branco com roxo ***/ #ask_form, #submit_form {transition: .9s; filter: hue-rotate(90deg); -webkit-filter: hue-rotate(90deg); } #ask_form:hover, #submit_form:hover { filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); } /*** ask & submit personalizados: Branco com roxo ***/
Branco com laranja:
/*** ask & submit personalizados: Branco com laranja ***/ #ask_form, #submit_form {transition: .9s; filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); } #ask_form:hover, #submit_form:hover { filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); } /*** ask & submit personalizados: Branco com laranja ***/
Branco com verde:
/*** ask & submit personalizados: Branco com verde ***/ #ask_form, #submit_form {transition: .9s; filter: hue-rotate(270deg); -webkit-filter: hue-rotate(270deg); } #ask_form:hover, #submit_form:hover { filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); } /*** ask & submit personalizados: Branco com verde ***/
Preto com cinza:
/*** ask & submit personalizados: Preto com cinza ***/ #ask_form, #submit_form {transition: .9s; filter: invert(1) grayscale(100%); -webkit-filter: invert(1) grayscale(100%); } #ask_form:hover, #submit_form:hover { filter: invert(0) grayscale(0%); -webkit-filter: invert(0) grayscale(0%); } /*** ask & submit personalizados: Preto com cinza ***/
Preto com roxo:
/*** ask & submit personalizados: Preto com roxo ***/ #ask_form, #submit_form {transition: .9s; filter: invert(1) hue-rotate(270deg); -webkit-filter: invert(1) hue-rotate(270deg); } #ask_form:hover, #submit_form:hover { filter: invert(0) hue-rotate(0deg); -webkit-filter: invert(0) hue-rotate(0deg); } /*** ask & submit personalizados: Preto com roxo ***/
Preto com laranja:
/*** ask & submit personalizados: Preto com laranja ***/ #ask_form, #submit_form {transition: .9s; filter: invert(1); -webkit-filter: invert(1); } #ask_form:hover, #submit_form:hover { filter: invert(0); -webkit-filter: invert(0); } /*** ask & submit personalizados: Preto com laranja ***/
Preto com verde:
/*** ask & submit personalizados: Preto com verde ***/ #ask_form, #submit_form {transition: .9s; filter: invert(1) hue-rotate(90deg); -webkit-filter: invert(1) hue-rotate(90deg); } #ask_form:hover, #submit_form:hover { filter: invert(0) hue-rotate(0deg); -webkit-filter: invert(0) hue-rotate(0deg); } /*** ask & submit personalizados: Preto com verde ***/
Preto com azul:
/*** ask & submit personalizados: Preto com azul ***/ #ask_form, #submit_form {transition: .9s; filter: invert(1) hue-rotate(180deg); -webkit-filter: invert(1) hue-rotate(180deg); } #ask_form:hover, #submit_form:hover { filter: invert(0) hue-rotate(0deg); -webkit-filter: invert(0) hue-rotate(0deg); } /*** ask & submit personalizados: Preto com azul ***/
Dê like ou reblogue este post se ele tiver sido útil;
No caso de alguma dúvida ou erro no tutorial/código, entre em contato comigo por aqui.
