So I was working on the Career Connections Site and wanted to find a way to switch from using graphics for 3 large buttons on the front page to text based buttons.
I knew that I could use CSS to accomplish this. I had in my head how that would work. But I figured that there must be some kind of tool that would allow me to create even more complex and rich looking buttons without having to do all the css coding myself.
So I did a Google Search for “css beveled button”. https://www.google.com/search?q=css+beveled+button&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
The first result was from StackOverflow:
How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?
The top answer was good. It shows the code for a button that was created at JSFiddle: http://jsfiddle.net/NPXfe/
Here’s the code:
[iframe src="http://imverity.com/assets/css-button001.txt" width="100%" height="120" scrolling="yes"]
I went over to JSFiddle and created the button I wanted. I copied the code to Notepad. I then changed the button colors and copped that code over for each color I wanted.
I pasted the code into the live css editor in Headway on the Career Connections site. Saved my changes.
It looked right in Firefox and Chrome. But in Internet Explorer? The button was there; but not the button color. Strange.
So I tried opening the jsfiddle.net page in Internet Explorer. Sure enough, the button is displayed but with no color. Just grey.
Time to move on.
I then do a search for “css button” in Internet Explorer.
The first result: http://www.cssbuttongenerator.com/
I look over the page. The page does generate a button in css. But it doesn’t look very good. It’s flat.
The second item: http://www.bestcssbuttongenerator.com/ doesn’t even work in IE.
The third item: http://www.cssbutton.me/ works perfectly. That’s the one I ended up using.
It’s got a very nice set of features that make it really easy to style and size your button almost any way you like.
It’s got a Normal, Hover and Active state. So if you want it to look like the button is pressed down when you hover the mouse over it, or if you want the button to be a certain color when it is Active or selected, you can.
It took a little bit to get the gradients right. I had to play with it to make it look the way I wanted. Picking the right colors for design is always a challenge and that’s where http://www.colorpicker.com/ always comes in handy.
I decided to create different color buttons.
Then I decided I wanted to replace the header graphics that I had created with a button type effect. So I created that as well. When I was done I ended up with this code:
Note: To include the below code in this page I needed to find a way to ensure that the WordPress Editor doesn’t mess with the code and that it displays it correctly. I took a pause from this post to go and find a way to do this. I wrote a separate post out it here: Finding A Way To Display Code On Page In WordPress
[iframe src="http://imverity.com/assets/css-buttons.txt" width="100%" height="400" scrolling="yes"]
Even after all of that, I still found that the text on the buttons doesn’t look precisely the way I would like. In the future I would like to make it more to my liking. But for now it’s good enough.
One thing that I found after I had the buttons on the page looking the way I want is that only the text in the button was a link. Not the whole button.
I did a search for “how to make a div a link”
The second result was “How do I make entire div a link?”
Their answer was: You need to assign display: block; property to the wrapping anchor.
So I added this to the link:
And it works!