Wang
Wang

Reputation: 41

How to make only bold text in button when mouse hover?

I'd like to make the only bold text in button when the mouse hover. In this case,

.button:hover {
   font-weight: bolder;
}

button and text are bold at the same time.

Upvotes: 1

Views: 3802

Answers (4)

Salmanul Faris
Salmanul Faris

Reputation: 356

Try Using this Code

.button {
  /*assign width to get the text bolder inside that area*/
  width:90px;
}

.button:hover {
  font-weight:bolder;
  }
<button class="button">Hover Me</button>

Upvotes: -1

ddm310
ddm310

Reputation: 135

<button class="btn">
Click
</button>

To select an element by class use "." followed by "class name"

For class Selector:

.btn:hover {
   font-weight: bolder;
}

and if you want to add any css to an element/control then, use just the element

For element Selector:

button:hover {
   font-weight: bolder;
}

Upvotes: 4

Minar_Mnr
Minar_Mnr

Reputation: 1405

.view:hover {
   font-weight: bolder;
}
  <button class="view">view</button>

Upvotes: -1

Anthony
Anthony

Reputation: 66

Its not "bolder"

you have to write instead:

font-size: bold;

Upvotes: -1

Related Questions