Button Drama!

We’ve been working on Javascript projects, and as my team and I were making our Gipthionary (it’s a dictionary with gifs! Located on Heroku! Check it out!) I had to deal with buttons.

So here’s the thing with buttons. You can make one with default formatting, and it gets the job done. While being ugly. And when I was just learning about buttons, this was enough. But now that I’ve got a Gipthionary to prettify, I wanted to make something that looked cool.

Like these turtles.

So I googled around for cool things to do with buttons. And then googled some more. And then realized it was time for bed. But I cannot go without discussing…button hover effects!

Here are 5 cool button effects, for when you want to impress people:

First here is what a default button looks like, with this HTML code:

<button type="button">Click Me!</button>
The default button

It gets the job done, but could look better: Let’s

  1. Add some color
button {
background-color: yellow;

Woohoo!

2. Add a huge border

button {
background-color: yellow;
border: 10px solid
}

3. Give it rounded corners:

Beautiful, right?

4. Make it way bigger. I want people to notice it.

button {
background-color: yellow;
border: 10px solid
}
I could see this from a million miles away.

5. Add a cool hover effect!!

button {
background-color: yellow;
border: 10px solid;
border-radius: 10px;
width: 100px;
height: 100px;
}
button:hover {
background-color: pink;
width: 100px;
height: 100px;
border-radius: 50%
}
Nifty!