CODEWITHSUNDEEP
css
Farith Adnan
Farith Adnan

Reputation: 175

Adjusting the size of hover's highlight box with CSS

Is there a way to change the size of hover's highlight box in <li'> when i clicked it using CSS? this is for my navigation bar.

I want to change the size of the active highlight box's size if possible.

<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#new">New Order</a></li>
  <li><a href="#search">Search Order</a></li>
</ul>

</body>

Upvotes: 0

Views: 658

Answers (1)

Real Quick
Real Quick

Reputation: 2810

add this line of code into the css to change the size of the anchor element on click.

li a:focus {
    transform: scale(1.08);
}

if you're trying to change the size on hover it would be:

li a:hover {
    transform: scale(1.08);
}

Upvotes: 1

Related Questions