Welcom!
Hello there! I am making a button for my website! Right now it is looking quite boring.
Thankfully, Cascading Style Sheets (CSS) let us add style to boring HTML
First, I put the button in a div. The div is given a color with CSS.
Now it is time to work on the button. It looks odd in the top left corrner. Lets center it! Still looks like a plain HTML button.
Wow! All I did was remove the outline, round the corners, and set a color for the background. It already looks like a button you would see on a real website!
Now I will make the button a bit larger and add a hover effect.
This is looking better than plain HTML, but at the top of the page I said that I wanted the button to not be boring. The button is boring. I am going to keep working on this.
It might be kind of hard to see what I am doing here. I am going for a look similar to old Mac OS, Windows Vista/7, and the Wii's menus.
He I have put a gradient on the background and button.
That's a lot better! Stacking inset box shadows on the button's gradient make it look shiny/glossy. There is also a regular box shadows to give the button a shadow. The background gradient has been scaled to give it a Mac OS like line background.
I don't think the window's outline fits. I have removed it and changed to to be a box shadow.
I have finished adding some finishing touches. The button changes color on mouse hover. It did take a lot more work than the flat design.
I was joking. It was barely any more work.
