How to create a shitty 2000s button in CSS3

We all like slick, simple and super clean design, but sometimes when it comes that kind of client, could happen that we’re forced to throw our skills into the trash bin and bend over at the immense power of money or the infinite emptiness of our client’s brain.

If someone doesn’t know what I’m talking about, please take a moment to read this marvellous piece of art that provides a super easy explanation of a designer’s worst nightmare: “How a web design goes straight to hell” by Oatmeal

Someone could think that this is impossibile, that it’s just fiction, a fairy tale used by the elders of the village to scary young designers…but unfortunately everything’s true.

So, what can we do when it comes this kind of shitty job? Stop crying like a baby and try to enjoy the moment with modern technology. So here’s the challenge of this tutorial:

Create this shitty 2000s button in CSS3, and bring back the web2.0 graphic style with the strength of a kick in the nuts


Lets start with the simple HTML code

And here it comes the simple CSS based on Bootstrap 3.0, to create the basic structure of a simple and modern flat button

My heart and my brain are telling me to stop and forget about the last part. The button could be like this, be normal, be modern, be loved by everybody…but no, I will pursue this shitty path and destroy my last drop of hope.

Ladies and gentlemen, here comes the shitty code to destroy your dignity:

Bonus shit!

Just because I’m kind and I know that if you’ve reached this point, you deserve an adeguate reward. Let’s add some rollover effect to our poor button

Now, go get a shower and forget about this!