How to hide button in CSS


The article was written at the request of my friend, who turned and told that now the Internet is impossible to find simple things, namely, hiding the download button (or any other) using CSS from being accidentally pressed.


This example is described in the article will not help You to hide the link from the robots involved in the parsing of the pages, as it is written in the attribute href of tag a in its pure form. However, this kind of protection from random users press the button "Download". The task was set that way, so I decided.


What are the options to display buttons/block?

I made 2 versions of the show:

- a button to show and hide when the button is pressed again

  1. #show-checkbox:checked ~ a {
  2. visibility: visible;
  3. opacity: 1;
  4. }


- button can only show

  1. #show-radio:checked + label {
  2. visibility: hidden;
  3. opacity: 0;
  4. }
  5. #show-radio:checked ~ .download-button {
  6. position: absolute;
  7. left: 0;
  8. visibility: visible;
  9. opacity: 1;
  10. transition: opacity .2s ease .2s,
  11. background-color .2s;
  12. }




The scheme of work

For both options, using exactly the same scheme.

Made the tag input (type="checkbox" for the first option, type="radio" for the second), and the tag label attribute for each. Tags label is styled with a button. By default the button "download" hidden. When you click on label changes the attribute checked the tags input, and then using the CSS selectors changes the opacity at the label and button "download". For beauty added some transition.



Due to the fact that the browser remembers the tags have the attribute value is checked (you can check yourself by refreshing the page without pressing the "reset" button), I had to wrap it all in shape and make input type="reset".

For more details see the code in the DEMO.

Live demo
Download ZIP

Found comments - 3

Козлов Андрей February 08, 2016
Спасибо за совет, я сделал попроще :) код: #show-radio ~ .download-button { transition: 0s; } А следом за ним селектор с :checked , таким образом правило transition переопределяется. :-)
TwirlFog February 06, 2016
При сбросе мелькает нижняя кнопка "Download" немного портит впечатление. Если кто-то решит похожим способом делать не только скрытие, но и показ кнопки. Можно дописать так, чтобы исправить: #show-radio:not(:checked) ~ .download-button { transition: 0s; }
2d September 07, 2015
Андрюха, большущее тебе спасибо!
Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C

Designer avatar

Hairs/Hats Mouth
Eyes Glasses