custom transparent css styling for jquery mobile button

Question

I saw that button on this side(http://letsgo.gorizia.it/) and was wondering how to implement such a style?

Is there a useful tutorial or can you give me a hint which css I should use?

Answer 1

I think you could take a look at this post on StackOverflow:

You should use rgba for it like stated in the post

.alpha60 {

    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);

    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);

    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    }

And this website:

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

That should give you the effects you want.

You probably still need to look for the rounding of corners but with css3 nowadays that shouldn't be that though to find.

Also W3schools have a page about it. I know it ain't the most reliable site but it can be handy for some small tips or tricks that you can't find that easily.

Answer 2

using RGBA for the background colour should do the trick:

.ui-btn { background-color: rgba(0,0,0,.25); }

Something like that should work but you'll want to play with the colour (first three values) and the opacity itself (last value)

Answer 3

I couldn't get the alpha60 class to have any effect when I added it as a class to buttons or anchor tags with data-role = button assigned. The JQM framework overrides that css, I guess (but I don't know that... if someone does, it would be interesting to learn).

What worked for me was ui-btn-up-a (or b or c or whatever your css theme is) like this (for a blue button with data-theme='b')

.ui-btn-up-b {
    background: rgba(0, 0, 255, 0.2); /* set the alpha to taste...*/
}

What was especially nice, I thought, was that the buttons become opaque on hover and keep their click (button down) properties, so the user really knows they're interacting with the button, but otherwise they can read whatever content is behind the button.

Of course, all the cautions about browsers that don't do rgba still apply, so you should make it robust with fallback css if your user base includes older browsers.

Answer 4

Add an anchor tag to your code and set it's HREF to whatever you want. Then go to Photoshop and generate an image for that button.

If you tried to do this in CSS, and set the opacity of the container holding the Anchor, the opacity would filter down to the text of the anchor as well. No good so...

Your final anchor tag should look something like:

<a href="whereever.com"><img src="myButton.png" /></a>

(Be sure your image is a .PNG because .JPEG does not support transparency)