How do I create a glassy, reflective, translucent button?

[chriscaldwell]

Hello,

Hope everyone is doing well.

I'm trying to figure out how to create one of those glassy looking buttons, but can only get so far.

The transparency tool is the key I suppose, but I cannot seem to get it right. How do you clip it so the piece of shape that I used to create the highlight isn't exported?

Can someone explain how to do this with a capsule type of button shape? I have attached my work so far. I want to be able to scale this down to try different sizes from say 275px wide to 350px.

Thank you so much,

Chris

 

order-now-orange.afdesign

orange.afdesign

[GarryP]

Without knowing exactly what you are trying to achieve it’s difficult for us to know how close you are to achieving it.
Would you be able to give us an example of what you are trying to replicate?
P.S. Where do you expect to use this style of button?

[firstdefence]

Like this Garry… You can make more complex glass but this is at it’s simplest, a rounded rectangle filled with white and a transparency gradient added.

orange glass btn.afdesign

[Jowday]

Yes, like that.

Plenty of tutorials out there for Illustrator, CorelDRAW etc. that will show you the general idea at least 🙂

 

 

[firstdefence]

You could also use this: http://www.holshousersoftware.com/glass/ a bit of a cheat but produces nice results.

[GarryP]

And there are other possibilities here: https://cooltext.com/
One simple example is this: https://cooltext.com/Logo-Design-Still-Cool-Button
However, I think it’s still worth knowing where they are going to use the button and how they are going to use it.

[v_kyr]

Buttons, Logos, Spheres ... etc. they all can be done in similar ways by reusing the one or other technique ...

• Glossy Sphere Logo in AD
• Glass buttons (AD - iPad)
• Glass Logo AD
• Shaded buttons AD
• ... etc.

[firstdefence]

When the fx are improved we can have slick glassy styles unless someone already has some?

[v_kyr]

• Affinity Designer Free Styles, Glass

Searching through the net via Google should give some results for Affinity styles etc. Further there might be already some in the forums resources section (didn't looked/searched).

[firstdefence]

1 hour ago, GarryP said:

And there are other possibilities here: https://cooltext.com/
One simple example is this: https://cooltext.com/Logo-Design-Still-Cool-Button
However, I think it’s still worth knowing where they are going to use the button and how they are going to use it.

I think the text “Order Now” is the clue, so on an ecommerce website, Ebay, or some such.

[chriscaldwell]

Wow, you guys are truly amazing. I'm grateful for this help! Now, I can work on the next element.

Thank you all very much. I'm going to put it together right now.

Chris

[GarryP]

18 hours ago, firstdefence said:

I think the text “Order Now” is the clue, so on an ecommerce website, Ebay, or some such.

Not necessarily.
It could be for use in an app, or it could be for a button with a hyperlink in a PDF, or the text could just be ‘filler’ as an example prior to making what’s actually needed, or probably many other things.
I asked the question so we could know, rather than guessing what Chris’ intentions were.

[firstdefence]

16 minutes ago, GarryP said:

Not necessarily.
It could be for use in an app, or it could be for a button with a hyperlink in a PDF, or the text could just be ‘filler’ as an example prior to making what’s actually needed, or probably many other things.
I asked the question so we could know, rather than guessing what Chris’ intentions were.

True, 🤔

[chriscaldwell]

Sorry, for not being more clear, the Order Now button was for use on a website to purchase an item!
Thank you so much for all your help!

[GarryP]

Thanks for the extra info’ Chris.
I only asked the question as I have two concerns about using that sort of button on a website:
1. That kind of ‘fancy’ or ‘overly-styled’ button is generally considered to be a bit ‘old fashioned’ nowadays. (A bit like having flashing text or a scrolling marquee.) If it fits with the overall website design then that’s absolutely fine, of course, but a lot of websites tend to go with something much more plain and that’s what users are used to seeing.
2. If the text for the button is contained within the raster image then it will be difficult (if it’s at all possible) for screen readers or text-based browsers to see it. This means, amongst other things, that some visually impaired users may have difficulty finding the button as their browser may not be able to tell them where it is.

If these neither of these concerns have a negative impact on your design then that’s okay, but I think it’s worth pointing them out just in case.

[firstdefence]

A lot of the elements on multi device websites are now CSS coded: https://codepen.io/desandro/pen/KqQbaq

[GarryP]

Going down the CSS route – as given in the example by firstdefence above – would be my choice if I wanted to use this sort of button on a website as the text within the button is discoverable by users in all browsers, even if images are prohibited (for whatever reason).

[v_kyr]

Common usage for webdesigners etc. See also more descriptive ...

• How to create a simple glass button with CSS

And in case of already using bootstrap with patching/modifying their CSS ...

• Bootstrap glossy buttons
• Bootstrap glass buttons
• ... and so on ...

 

[Alfred]

6 hours ago, GarryP said:

If the text for the button is contained within the raster image then it will be difficult (if it’s at all possible) for screen readers or text-based browsers to see it.

Screen readers have no way of knowing what text, if any, is included in a raster image. That’s what the HTML ‘alt’ attribute is for.