Transform CSS property doesn't work with <a> element
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>
Answer
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:
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>