# How to add active background color to link when touched

**URL:** <https://forum.ionicframework.com/t/how-to-add-active-background-color-to-link-when-touched/8220>\
**Category:** ionic-v1\
**Created:** [August 14, 2014, 9:27am UTC](https://forum.ionicframework.com/t/how-to-add-active-background-color-to-link-when-touched/8220 "2014-08-14T09:27:35Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![boopage](https://avatars.discourse-cdn.com/v4/letter/b/85f322/32.png) [@boopage](https://forum.ionicframework.com/u/boopage)\
**Post date:** [August 14, 2014, 9:27am UTC](https://forum.ionicframework.com/t/how-to-add-active-background-color-to-link-when-touched/8220/1 "2014-08-14T09:27:35Z")

</div>

I want to add a active status to all my link, for example make background color brighter so that user can notice its been clicked on, what is the best way to do this? I tried css like this:

a:active{  
background-color:rgba(0,0,0,0.1);  
}

But this only works on Chrome, and on my phone it doesn’t react fast enough to show the active background, it only shows the active background when I touch and hold it.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [August 14, 2014, 7:23pm UTC](https://forum.ionicframework.com/t/how-to-add-active-background-color-to-link-when-touched/8220/2 "2014-08-14T19:23:31Z")

</div>

For that, try this instead

> **[List: 1.0.0-beta.11](https://codepen.io/mhartington/pen/CDJGH)**
>
> An Ionic list directive Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[List: 1.0.0-beta.11\](http://codepen.io/ionic/pen/JsHjf/)....

`.item-content.activated{}`

---

<div class="post-metadata">

**Author:** ![boopage](https://avatars.discourse-cdn.com/v4/letter/b/85f322/32.png) [@boopage](https://forum.ionicframework.com/u/boopage)\
**Post date:** [August 14, 2014, 9:14pm UTC](https://forum.ionicframework.com/t/how-to-add-active-background-color-to-link-when-touched/8220/3 "2014-08-14T21:14:09Z")

</div>

Hi,

The code doesn’t seem to be working.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [August 14, 2014, 9:22pm UTC](https://forum.ionicframework.com/t/how-to-add-active-background-color-to-link-when-touched/8220/4 "2014-08-14T21:22:33Z")

</div>

Yeah, codepen has been acting up. Try visiting the page through http instead of https

---

<div class="post-metadata">

**Author:** ![boopage](https://avatars.discourse-cdn.com/v4/letter/b/85f322/32.png) [@boopage](https://forum.ionicframework.com/u/boopage)\
**Post date:** [August 14, 2014, 10:36pm UTC](https://forum.ionicframework.com/t/how-to-add-active-background-color-to-link-when-touched/8220/5 "2014-08-14T22:36:54Z")

</div>

I think I have performance issue with my code. trying to make it work on tabs, and when touch the screen the activated effect works randomly, but if I hold it a little longer it will work. Also the tab switch experience a small delay, it doesn’t work very well if I switch quickly between tabs.

---

<div class="post-metadata">

**Author:** ![boopage](https://avatars.discourse-cdn.com/v4/letter/b/85f322/32.png) [@boopage](https://forum.ionicframework.com/u/boopage)\
**Post date:** [August 30, 2014, 6:02am UTC](https://forum.ionicframework.com/t/how-to-add-active-background-color-to-link-when-touched/8220/6 "2014-08-30T06:02:48Z")

</div>

The active background colour won’t work If I tap the screen fast enough.

---

<div class="post-metadata">

**Author:** ![james\_hoegerl](https://avatars.discourse-cdn.com/v4/letter/j/cdc98d/32.png) [@james\_hoegerl](https://forum.ionicframework.com/u/james_hoegerl)\
**Post date:** [September 13, 2014, 3:19am UTC](https://forum.ionicframework.com/t/how-to-add-active-background-color-to-link-when-touched/8220/7 "2014-09-13T03:19:31Z")

</div>

I’m having the same issue. If I hold my finger on the item it will activate however if I do a quick tap nothing appears.

---

<div class="post-metadata">

**Author:** ![ShubhamBadal](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/shubhambadal/32/90350_2.png) [@ShubhamBadal](https://forum.ionicframework.com/u/ShubhamBadal)\
**Post date:** [June 28, 2015, 12:19am UTC](https://forum.ionicframework.com/t/how-to-add-active-background-color-to-link-when-touched/8220/8 "2015-06-28T00:19:06Z")

</div>

tried but not working on touch laptop or android phone, please help

> **[Active css not working on andoird](http://forum.ionicframework.com/t/active-css-not-working-on-andoird/27256)**
>
> The css for active state works fine in browser but not at all in android device/emulator i have defined some classes and following html \< a class="fg-white bg-active-darkBlue button" style="background-color:#3B5998;"\>Sign in with Facebook\< / a \> ...