Transform CSS property doesn't work with element

Question

I want to scale(x,y) my <a> element when I click on it, but it doesn't work. I use Mozilla Firefox web browser to run the program.

Here is my code:

scaleElement.html

<html>
    <head>
        <title>CSS3 Transform and Transition</title>
        <style>
            a{
                background-color: green;
                color: white;
                padding: 10px 20px;
                text-decoration: none;
                border: 2px solid #85ADFF;
                border-radius: 30px 10px;
                transition: 2s;
            }
            a:hover{
                transform: scale(2,2);
            }
        </style>
    </head>

    <body>
        <center><a href="xyz.html">click here</a></center>
    </body>
</html>

Hashem Qolami · Accepted Answer · 2015-04-16T07:30:01.603

transform is not applicable to inline elements such as <a>. You could display the link as inline-block or block to get transform to work:

transformable element

A transformable element is an element in one of these categories:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [...]

Where atomic inline-level elements include:

replaced inline-level elements, inline-block elements, and inline-table elements

a { display: inline-block; }
a:hover { transform: scale(2,2); }

Besides, there's no on-click state available in CSS. Possible options are :active or :hover, or using checkbox hack.

a {
  background-color: green;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border: 2px solid #85ADFF;
  border-radius: 30px 10px;
  transition: all 2s;
  display: inline-block; /* <-- added declaration */
}
a:hover{ transform: scale(2,2); }
/* just for demo */
body { padding: 2em; text-align: center; }

<a href="xyz.html">click here</a>

1

Thanks...it's run properly. – Aditya Apr 16 '15 at 07:24

score 6 · Answer 2 · answered Apr 16 '15 at 07:19

Use display:block and give it a height and width

a {
  background-color: green;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border: 2px solid #85ADFF;
  border-radius: 30px 10px;
  transition: 2s all ease-in;
  display: block;
  width:100px;
  height:50px;
}
a:hover {
  transform: scale(2, 2);
}

<center><a href="xyz.html">click here</a>
</center>

Transform CSS property doesn't work with element

scaleElement.html

2 Answers2

Linked