Jump to content

Making "push style" buttons


Recommended Posts

It was something like this:

1. Make a dark blue/light blue Linear Reflected gradient

2. Use Shift+Ellipse tool, and make a circle

3. Invert selection, and delete

4. Feather

5. Add new layer, make a white, filled rectangle in the top half

6. Gaussian Blur, 40-50px

7. Make an ellipse in the center of the white rectangle layer

8. Right click, and drag the bottom half of that ellipse; This should make a semicircle

9. Ctrl+I, then Ctrl+X

10. Radial Blur, 2-4px

11. Drag the semicircle to the top

12. Make a new layer and move it under the rectangle layer

13. Draw an arrow

14. Flatten

15. To give the impression that you are rolling your cursor over the button, add glow. To give the expression you just clicked on the button, add contrast and bulge with a negative number.

16. Add Lens Plugin (just a bit)

Done! :D

Sorry for double posting

tagflowsig.png

+_+_+_+_+_+_+_+_+_+_+_+

I am a disco dancer. +_+_+_+_+_+_+_+_+_+_+_+

Link to comment
Share on other sites

1. http://img524.imageshack.us/img524/7878 ... ar1nu1.png

2. http://img66.imageshack.us/img66/3811/s ... tarqv6.png

3. http://img403.imageshack.us/img403/6823 ... ar2lq5.png

4. event http://www.phpbb.com/

src="http://img524.imageshack.us/img524/7878/xltavatar1nu1.png"

onMouseOver="this.src='http://img66.imageshack.us/img66/3811/starorbavatarqv6.png';"

onMouseOut="this.src='http://img524.imageshack.us/img524/7878/xltavatar1nu1.png';"

onMouseDown="this.src='http://img403.imageshack.us/img403/6823/pdnavatar2lq5.png';"

onMouseUp="this.src='http://img524.imageshack.us/img524/7878/xltavatar1nu1.png';"

onClick=""; //http://img524.imageshack.us/img524/7878/xltavatar1nu1.png

>

Link to comment
Share on other sites

Do you mean "in a web site"?

If so, you need to start with 3 button images. Then, you need to tie them to events using javascript.

Here is an example:

http://www.geocities.com/boltbaits/buttonexample/

Can I use this process to create "Push Style Buttons" in this forum :?:

I see the HTML is OFF in the Options. I have enabled HTML in Profile.

No, you can not. HTML is off for everyone.

Click to play:
j.pngs.pngd.pnga.pngp.png
Download: BoltBait's Plugin Pack | CodeLab | and how about a Computer Dominos Game

Link to comment
Share on other sites

Enabling html is under the power of the administrator.

v An excellent open–source strategy game—highly recommended.

 

"I wish I had never been born," she said. "What are we born for?"

"For infinite happiness," said the Spirit. "You can step out into it at any moment..."

Link to comment
Share on other sites

ncfan51 - I clicked on the link for your website and got 'Internet Explorer cannot display the webpage'. Is your site down?

Yeah, server 7 of forumer.com is offline, and the AoW forums were on server 7. Just like the PDN forums were offline for part of yesterday....They'll be back on tomorrow. And it's Yata's forums BTW :wink:

tagflowsig.png

+_+_+_+_+_+_+_+_+_+_+_+

I am a disco dancer. +_+_+_+_+_+_+_+_+_+_+_+

Link to comment
Share on other sites

I'm not being strict... I just don't want my forum to be an issue in the ways of spreading the word in the forum. I could see where Rick, BB, or CMD could get a little annoyed. We always think the other is mad, BB00 :P.

"Only two things are infinite, the universe and human stupidity, and I'm not sure about the former"

[ dA Paint.NET Chat :: Yata on dA ]

Link to comment
Share on other sites

How are 3 button images made with CSS :?:

a { background; } - normal state
a:hover { background; } - hover state
a:active { background; } - pressed state

I've put together a simple demonstration here:

http://cmdsketchpad.com/pdn/buttontest.htm

Please note that no effort has been put into cross-browser compatibility for this page. Firefox, Opera, and IE7 work fine, but IE6 shows the hover and pressed states of #forward and #back even with the overriding .null class applied (the Back button). It's just a quick demo, so I'm not spending time fixing IE6's mistakes.

This demo uses the Sliding Doors technique for the links, along with semantic text redundancy for non-CSS browsing (it's a habit... what can I say), so it's a little more advanced than the simple explanation I gave above, but if you'd like to check out the magic behind it, just take a look at the source code of the page. I have included the CSS in the header instead of an external text file for ease of viewing.

And, in order for me to justify posting an entire message about CSS... the buttons were made in PDN! :D

Enjoi! :wink:

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

How are 3 button images made with CSS :?:

a { background; } - normal state
a:hover { background; } - hover state
a:active { background; } - pressed state

I've put together a simple demonstration here:

http://cmdsketchpad.com/pdn/buttontest.htm

Please note that no effort has been put into cross-browser compatibility for this page. Firefox, Opera, and IE7 work fine, but IE6 shows the hover and pressed states of #forward and #back even with the overriding .null class applied (the Back button). It's just a quick demo, so I'm not spending time fixing IE6's mistakes.

This demo uses the Sliding Doors technique for the links, along with semantic text redundancy for non-CSS browsing (it's a habit... what can I say), so it's a little more advanced than the simple explanation I gave above, but if you'd like to check out the magic behind it, just take a look at the source code of the page. I have included the CSS in the header instead of an external text file for ease of viewing.

And, in order for me to justify posting an entire message about CSS... the buttons were made in PDN! :D

Enjoi! :wink:

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

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...