I have a website that is primarily used in K-12 schools. I have some social media buttons on it like Facebook 'like' and Pinterest 'pin it'. However, I'd like to have these buttons be hidden....where you have to click once on something (like an image that is covering them up but disappears when clicked....or a tab that just sort of scrolls away to reveal the buttons behind it). The reason for this is because these sites are usually blocked in schools (I realize there's probably nothing I can do about this) and these buttons look kind of ugly when they're blocked (it'll show a question mark or or something in place of the button in these cases). However, I do want the people who do not have them blocked to be able to access and see them easily.
I am in search of a simple solution to this where the buttons wouldn't be immediately visible until you click on something.
Why make this complex? Keep it simple. Did you try simply to use a set logo for said websites (Facebook, Twitter, etc) and that way you can always have those buttons look "good/not ugly" and you dont need to "hide them" they wont be accessable since they are blocked but, you can have the logos that way. Unless you really want to hide them (Not sure if that is the case, please explain)
For want of a nail...the horseshoe was lost. For want of a horseshoe, the steed was lost. For want of a steed...the message was not delivered. For want of an undelivered message.....the war was lost.