How to make spoiler button

/
2 Comments
I REALLY IN THE MOOD FOR GIVING TUTORIALS LAH, I TELL YOU. LOLz. gonna spam a lot of tuts today.

so now i'm going to teach you how to make a spoiler button 8D
there are 3 kinds of spoiler button, just so you know.

First, a button that dissapear when you click them.
Second, a button that don't dissapear when you click.
Third, a button that will change the text of the button by clicking it. :S (do you guys get it?)

So which one do you prefer?
Still, i'm going to show you how to make all of them though.

The first one, a button that dissapear when you click them.
Here's the awesome code :



change the border, padding, color and font to your desire. This is my favourite kind of spoiler. usually i go by no border, padding 5px, color and font same as the text at my blog.

Somehow it will look like this later :


if you wanna make the button center-aligned but you wan't to keep the hidden meesage left-aligned just simply put <center></center> between <button> and </button>.

Second, a button that don't dissapear when you click.

This is the code for the second kind of spoiler :



It will look like this :



Notice that the button did not dissapear like the first one. Still the same, chage the border, padding and others to something you desire.

Third, a button that will change the text of the button by clicking it.

For the third one, the text on the button will change if you click it.
This works in Mozilla Firefox and IE only though. Not in Google Chrome nor RockMelt. :S
The code for the third one :



it will look like this :


Same as the second and the first one, change the css to your desire. Note that you can change the word "Show spoiler" and "Hide spoiler" to whatever you want to also.

So i think that's all, if you got any questions comment on this post, not tagboard. Tagboard is for post-unrelated comments only.


You may also like

2 comments:

  1. instant favorite!! <3 thankyou so much for sharing this to us, dear :)

    ReplyDelete
  2. your welcome dear ;) if you want other tuts tell me <3

    ReplyDelete