Jump to content

How does one create a rectangular browser button?


Recommended Posts

I have been looking around in turotials but I must have missed this one. I am after a tut that shows how to create a dynamic-sized rectangular browser button. I am looking for something with a 'raised' appearance with the ability to have corresponding images for 'mouse-over' and 'clicked'.

It's too easy to say 'It's too hard'!"

Link to comment
Share on other sites

Is this something of the sorts you are looking for? you can easily make one button then replicate it as i have shown :D of course you could add text and such in there but i am lazy and i am just seeing if this is what you are looking for.

31521_8c92394f103d2e25089037a12cab01f3

 

"Clearly it's a very serious and literal meaning. If you're not solving physics equations then get off my lawn!-Rick Brewster Paint.net Lead Developer"

Link to comment
Share on other sites

Thanks for the response theonlychad, but I don't think you have the concept.

Go to http://www.google.com.au/ and look at the two buttons 'Google search' and 'I'm feeling lucky'. They appear 'raised' on the screen and they 'depress' when you click on them. That's the functionality I am seeking, but a slightly more upmarket appearance would not go amiss.

It's not that I am justlooking for a gimme, but if I can learn how to make these buttons I'll have a really good insight into how to do other things I want to do.

Thanks

It's too easy to say 'It's too hard'!"

Link to comment
Share on other sites

That would have to be done with coding as you were looking for. You will have to make the individual buttons and save them as pngs then code the page to use them accordingly.

 

"Clearly it's a very serious and literal meaning. If you're not solving physics equations then get off my lawn!-Rick Brewster Paint.net Lead Developer"

Link to comment
Share on other sites

You will have to make the individual buttons ...

It is the "making" part I need to learn from this forum :wink: . The scripting part is a separate issue.

I am only asking because all the button tutorials I have seen deal with round buttons. They's look a bit odd in a vertical stack in a sidebar.

It's too easy to say 'It's too hard'!"

Link to comment
Share on other sites

well it would be fairly straight forward to create the buttons. Here is a mini tutorial on how to make the google buttons at a larger size :D

b8bd2041.png

7d634c56.png

well here is the mini tut for it.

step 1:

Open paint.net with canvas size of 200 x 50

step 2:

select white as your primary color and grey as your secondary

step 3:

make a linear gradient with the white fading in to grey from the top

step 4:

on a new layer add your text

step 5:

add another layer press ctrl+a and then run the outline selection plugin at 1 pixel radius.

step 6:

flatten and save as png.

for the blue one:

take the image you created in the first mini tut. The run the color tint plugin and tint it the color you want it to look like on mouse over.

 

"Clearly it's a very serious and literal meaning. If you're not solving physics equations then get off my lawn!-Rick Brewster Paint.net Lead Developer"

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...