CODEWITHSUNDEEP
css
Dummy
Dummy

Reputation: 373

How do I rotate an icon with CSS on hover

I am trying to make an icon rotate on mouse hover but can't get it to work. I couldn't find a solution on the internet. This is what I've tried so far:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.material-icons:hover {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
button.c-accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 5px;
  width: 50%;
  border: none;
  border: 1px solid #CBCBCB;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.float-right{
  float: right;
}
<button class="c-accordion">Section 2
      <i class="material-icons float-right">keyboard_arrow_down</i> 
  </button>

Upvotes: 1

Views: 2755

Answers (2)

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

Am able to find two issues,

  1. rotate is working fine in chrome, but not working in firefox.
  2. transition is not smooth as mentioned by others.

So for first issue changed hover pseudo from icon to button because there is an issue in firefox when <i> used inside button. For second one followed as like others by adding transition.

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
.c-accordion:hover .material-icons {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  transition: all .3s ease;
}

button.c-accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 5px;
  width: 50%;
  border: none;
  border: 1px solid #CBCBCB;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.float-right {
  float: right;
}
<button class="c-accordion">Section 2
          <i class="material-icons float-right">keyboard_arrow_down</i>

Upvotes: 4

Swapna Suradkar
Swapna Suradkar

Reputation: 18

icon rotate on mouse hover on chrome but not on Mozilla Firefox same code work on my side on chrome

Upvotes: 0

Related Questions