easy php glossy button

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
guillem
Forum Newbie
Posts: 3
Joined: Tue Nov 17, 2009 2:49 am

easy php glossy button

Post by guillem »

hi there!
i've been searching for an EASY function or code to create a glossy submit button.
I mean, a function to create an image or something (round, square or whatever) containing a text or another image, and making it glossy.
a thing , for example, like : create_glossy_button('inscription') that would create that.
maybe there's a possibility to do it with css or so, but i dont think so, as it involves calculation (gradients and such).
does anybody know of something like that??
thanks in advance!!!
guillem
User avatar
iankent
Forum Contributor
Posts: 333
Joined: Mon Nov 16, 2009 4:23 pm
Location: Wales, United Kingdom

Re: easy php glossy button

Post by iankent »

First off, it can be done using CSS and that may even be easier than using PHP (certainly less resource intensive on the server-side). What you need to do is create a <div> (or any other element really, e.g. <li> or <span>) and set its background to the blank gradiant/glossy button image. You'd then simply put the text inside the element which gets overlayed on top of the background. E.g.

Code: Select all

 
<div class="glossy_button">My Button</div>
<div class="glossy_button">Another Button</div>
<style>
    .glossy_button {
        background: url('/path/to/image.png');
        width: 100px;
        height: 40px;
        font-size: 1.2em;
        overflow: hidden;
    }
</style>
 
Depending on the element used you may need to add a display: block or display: inline-block to the CSS class tag. Set the width and height to the size of the background image, and make sure the background is big enough to hold any text you choose to put in there (otherwise some text will disappear off the edge of the button).

Doing it that way also nicely handles text-based browsers, or users who have images disabled, who would just see the text 'My Button' or 'Another Button' instead of the image.

Having said that, if you want to do it in PHP, you can use the various image functions to take a blank image background and overlay text on it, outputting the result as an image. I won't repeat whats posted elsewhere around the net, but this page gives you a good starting point:
http://www.thesitewizard.com/php/create-image.shtml

Personally I'd go the CSS route unless you need to do it in PHP as image processing functions are anything but fast when compared to using a div and a static image.

hth
User avatar
Weiry
Forum Contributor
Posts: 323
Joined: Wed Sep 09, 2009 5:55 am
Location: Australia

Re: easy php glossy button

Post by Weiry »

im not too sure if this is even supported through php...

However, this is entirely possible through CSS. You just need separate images for each state of the button (if your wanting a roll over button).

CSS Rollover Buttons
Then you can use a javascript function on that button to submit the form data.
Javascript Form Submit
guillem
Forum Newbie
Posts: 3
Joined: Tue Nov 17, 2009 2:49 am

Re: easy php glossy button

Post by guillem »

awesome! thanks!
i was about to start by the wrong way.
easy and fast. will work for me.
well explained, by the way :-)
thanks again.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: easy php glossy button

Post by superdezign »

Weiry wrote:im not too sure if this is even supported through php...
That's not true. PHP has the GD library. Using CSS is the most efficient and widely-accepted method of doing such. But, if the OP is after a pretty font as well, their only option is to use images.

Though, even in that case, it'd be wiser to just pre-render the images.
User avatar
Weiry
Forum Contributor
Posts: 323
Joined: Wed Sep 09, 2009 5:55 am
Location: Australia

Re: easy php glossy button

Post by Weiry »

superdezign wrote:That's not true. PHP has the GD library
I am aware PHP has the GD lib, although what i was unsure about was whether the GD lib supports an actual glossy effect which the OP was after.
guillem
Forum Newbie
Posts: 3
Joined: Tue Nov 17, 2009 2:49 am

Re: easy php glossy button

Post by guillem »

one more question. you seem to know!
i'll do the css glossy button as background of a <td> or <tr>.
to set wingdings as text over the button (guess the font is on mac too!),
should i just use <font family="windgdings"> and it's hover to whatever color or so???


just as a thank, i'll explain you a classical spanish joke:
2 friends meets, and one thells the other:
-bud, i got an awesome dog: brings the newspaper by the morning, gets my shoes when i arrive home, when we go walking, he plays with beautiful girls so i can chat, brings the remote when i sit in the sofa...
--hey! hey! stop! i NEED that dog!!! i'll buy it.
-no, no. it's not on sale.
--HEY!! I NEED IT!!! i'll find a gf with that dog!! i'll pay 10000$/€, whatever
-hhmmmm. ok. sold.
time later, they meet again:
--hey! that dog you sold me is crap!!! he poops on the sofa, i got to pull and push him when we walk, NEVER EVER STOPS BARKING!! and girls run away when--
-hey! you're never gonna sell it this way!!!!

see you!
User avatar
iankent
Forum Contributor
Posts: 333
Joined: Mon Nov 16, 2009 4:23 pm
Location: Wales, United Kingdom

Re: easy php glossy button

Post by iankent »

Weiry wrote:
superdezign wrote:That's not true. PHP has the GD library
I am aware PHP has the GD lib, although what i was unsure about was whether the GD lib supports an actual glossy effect which the OP was after.
I took the glossy bit to mean the background as opposed to the font, in which case the background can be rendered using a 3rd party app such as photoshop and merged with the text using GD.

worth noting that you can do fancy fonts using HTML (see http://www.netmechanic.com/news/vol3/css_no15.htm)

p.s. lol, good joke :P

p.p.s in CSS you want to do something like this to set the font family:
<div style='font-family: wingdings;'>blah</div>

hth
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: easy php glossy button

Post by superdezign »

Haha! Good joke. :D

Also, the tutorial that was linked by ~Weiry is a bit outdated in terms of what is the most acceptable method of creating buttons.
  • It doesn't make use of the sliding-door effect, and
  • it doesn't place both images into one file.
The sliding doors effect makes the button resizable, though if that's not an issue, then sliding doors isn't necessary. However, placing both images into one file saves space and reduces the amount of client requests to the server. I can't think of a reason not to do it.
Post Reply