Question

I am trying to write a mobile application that has images instead of buttons as links.

How do I style this image link so that when it is pressed the image glows or appears darker or moves slightly or grows slightly bigger?

In my research on the internet I found the ui-btn class which has ui-btn-down-a, ui-btn-up-a and ui-btn-hover-a.

However in my case, this not a button, it’s an image which is a link.

How can I apply the effects?

UPDATE:

A good place to obtain transformation is http://westciv.com/tools/transforms/index.html

<div data-role="page" data-theme="a">
    <div data-role="content" data-theme="a">
        <a ontouchstart="" href ="wwww.yahoo.com"; class="ui-link-test">
            <img class="icon" src="img/icon.png" alt="black-button.png">
        </a>
    </div>
</div>

Haradhania

Answer 1

• Glows: use box-shadow
• Appears darker: change the background a bit or apply a mask (mask could be a pseudo-element over it);
• Moves slightly: change margin or use a translate transform;
• Grows slightly bigger: change width and height or use a scale transform;

For the second two, I’d recommend transforms. They are supported by Android and have the advantage that moving or scaling the link won’t disturb (= move) the elements around it.

Demo (keep mouse button pressed to see effects)

Relevant CSS:

.glow:active { box-shadow: 0 0 15px #fe0; }
.darker:active { background: goldenrod; }
.move:active { margin-left: 50px; } /* moves elements at its right */
.move2:active { transform: translateX(15px); }
.bigger:active { width: 120px; height: 66px; } /* moves alements after it */
.bigger2:active { transform: scale(1.1); }

---

NOTE: For transforms you need to add the prefixed versions before the unprefixed version as no current version of any browser supports the unprefixed version (IE 10 and Firefox 16 have been announced to support transforms unprefixed):

.move:active {
    -webkit-transform: translateX(15px); /* the one you need for Android */

    /* if your app is ONLY for Android, you can leave the next three out */
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    -o-transform: translateX(15px);

    transform: translateX(15px); /* always write it last */
}

.bigger:active {
    -webkit-transform: scale(1.1); /* the one you need for Android */

    /* if your app is ONLY for Android, you can leave the next three out */
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);

    transform: scale(1.1); /* always write it last */
}

Same thing is valid if you want smooth transitions:

a.ui-link-test {
    -webkit-transition: .5s; /* the one you need for Android */

    /* if your app is ONLY for Android, you can leave the next three out */
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;

    transition: .5s; /* always write it last */
}