How to give 3D effect to a Button

  • Thread starter Thread starter Oriane
  • Start date Start date
Basically, all you really need to do is set the borders and background
color. If you take a look at the navigation on my website, it is nothing
other than a bunch of <a> tags. Since it sounds like you want the buttons to
be Buttons (not just hyperlinks), just use the ASP.NET LinkButton control
instead. If you want an image, use the ImageButton control and add the css
for the border. To create the button-pushing effect, you will need to use
the JavaScript onmousedown and onmouseup events to change the class property
(or, if you prefer, change the css properties individually, but the class
property would be more efficient). But the main point here is to use the css
border properties.
 
Hi Oriane,

As for making a 3d effect Button, I think the following two ways should be
considerable:

1. Use CSS style to decorate the html or ASP.NET button element. And you
can also change css style of html element(or server control) via ASP.NET
server code or client-side javascript.

2. You can use an Image (with 3d effect) to build an image button, this
will be much easier than CSS approach(if you already have some good 3d
button image). And image approach has better cross-browser compatibility
than css.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

Note: MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 2 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions. Issues of this
nature are best handled working with a dedicated Microsoft Support Engineer
by contacting Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------
 
Hi Steven,

"Steven Cheng" said:
Hi Oriane,

As for making a 3d effect Button, I think the following two ways should be
considerable:

1. Use CSS style to decorate the html or ASP.NET button element. And you
can also change css style of html element(or server control) via ASP.NET
server code or client-side javascript.

2. You can use an Image (with 3d effect) to build an image button, this
will be much easier than CSS approach(if you already have some good 3d
button image). And image approach has better cross-browser compatibility
than css.
Click to expand...
I'm already using the second approach. However, it means that I have to have
one image for each color the user wants.

My goal is to give the user the opportunity to choose the backhground color
of the buttons with a "ColorDialog" button. So of course I can use CSS to
decorate the button, but with what color for the borders ? I mean: if there
an algorithm to obtain the color of the the border given the color of the
background ?

Best regards
 
Hi again !

The answer to the last question of my previous post, is: convert the color
to HSL, modify the L parameter and convert back (I've found a code to do
that).
 
Also, although it is a little more effort, ASP.NET can be used to generate
and return an image by setting the content type to image/gif.
 
Thanks for Nathan's input.

Yes, using httphandler to emit dynamic image is also a good idea to avoid
many pregenerated image files.

#Thumbnailer HTTP Handler
http://www.codeproject.com/KB/web-image/thumbnailer.aspx

http://www.c-sharpcorner.com/UploadFile/desaijm/HTTPHandlersForImages1115200
5062705AM/HTTPHandlersForImages.aspx

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

--------------------
From: "Nathan Sokalski" <[email protected]>
References: <[email protected]>
Click to expand...
 
Thank you Nathan and Steven for your answer. I think this would solve my
problem concerning the sizing of the image.
Now I still have a problem concerning the "main" color of my image.

The idea is the following: I have a button which is "mainly" blue (see for
instance
http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/,
the "Images and Markup" section). My user choose the "red" color. How can I
programmatically shift this "main" color from "blue" to "red" ? I can use
the ColorMatrix but with which parameters ?

Best regards
 
HI Oriane,

I think the main problem is still how you can get an algorithm to
programmtically generate the certain RGB color parameter depend on user
select. After that, to update the page, we can just store that new
calcuated parameter in session or some other place and make all the
pictures or element on pages regenerated from that stored color parameter.

Have you also tried posting the color generation question in some graphic
design forum or newsgroups?

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

--------------------
 
Hi Steven,

"Steven Cheng" said:
HI Oriane,

I think the main problem is still how you can get an algorithm to
programmtically generate the certain RGB color parameter depend on user
select.
Click to expand...
Right :-)
After that, to update the page, we can just store that new
calcuated parameter in session or some other place and make all the
pictures or element on pages regenerated from that stored color parameter.
Click to expand...
As you suggested, the best way would be to use a HTTP handler which could
use the Color&Blue parameter...
Have you also tried posting the color generation question in some graphic
design forum or newsgroups?
Click to expand...
More or less. I've posted in the framework.drawing NG. I will tell you if I
find something interesting

Best regards
 
Sure. Look forward to any good news from you.

Regards,

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

--------------------
 
Back
Top