Change direction of a CSS transition

Question

I would like to make the buttons move left so they don’t hit with the right margin and move, but I don't know how.

Can someone explain how to change the direction of the transition?

.menus {
  position: fixed;
  right: 40;
  top: 150px;
  z-index: 2000;
}

.menus ul {
  list-style: none;
}

.menus ul li a {
  display: inline-block;
  color: #fff;
  background: #000;
  padding: 10px 15px;
  text-decoration: none;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.menus ul li .icon-home3 { background: #81e0cd; }
.menus ul li .icon-terminal { background: #81e0cd; }
.menus ul li .icon-pacman { background: #81e0cd; }

.menus ul li a:hover {
  padding: 10px 25px;
  background: #000;
}

<div class='menus'>
  <ul>
    <li>
      <a href="#" class="icon-home3"></a>
    </li>
    <li>
      <a href="#" class="icon-terminal"></a>
    </li>
    <li>
      <a href="#" class="icon-pacman"></a>
    </li>
  </ul>
</div>

Answer 1

You can use the text-align property to move the items to the right. I also changed the padding property to width , since we want to modify the width anyway.

The changes are applied to the item onHover event. So, we start with the standard size of the element e.g. 20px and then let it grow to 100% or whatever size you like.

As others already wrote in the comment section, feel free to use flexbox as an alternative.

    .menus {
      position: fixed;
      right: 40;
      top: 150px;
      z-index: 2000;
      background-color: pink;
    }
    
    .menus ul {
      display: block;
      width: 100px;
      text-align: right;
      padding: 10px 0 5px;
      margin: 0;
      list-style: none;
    }
    
    .menus ul li a {
      display: inline-block;
      color: #fff;
      background: #000;
      height: 20px;
      width: 20px;
      margin: 0;
      padding: 0;
      text-decoration: none;
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
    }
    
    .menus ul li .icon-home3 {
      background: #81e0cd;
    }
    
    .menus ul li .icon-terminal {
      background: #81e0cd;
    }
    
    .menus ul li .icon-pacman {
      background: #81e0cd;
    }
    
    .menus ul li:hover a {
      width: 100%;
      background: #000;
    }

<div class='menus'>
  <ul>
    <li>
      <a href="#" class="icon-home3"></a>
    </li>
    <li>
      <a href="#" class="icon-terminal"></a>
    </li>
    <li>
      <a href="#" class="icon-pacman"></a>
    </li>
  </ul>
</div>

Answer 2

Hacky way of doing it but it might you.

Change your padding: 10px 25px into transform: scaleX(1.6) you can input whatever value you want.

.menus {
  position: fixed;
  right: 40;
  top: 150px;
  z-index: 2000;
}

.menus ul {
  list-style: none;
}

.menus ul li a {
  display: inline-block;
  color: #fff;
  background: #000;
  padding: 10px 15px;
  text-decoration: none;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.menus ul li .icon-home3 { background: #81e0cd; }
.menus ul li .icon-terminal { background: #81e0cd; }
.menus ul li .icon-pacman { background: #81e0cd; }

.menus ul li a:hover {
  transform: scaleX(1.6);
  background: #000;
}

<div class='menus'>
  <ul>
    <li>
      <a href="#" class="icon-home3"></a>
    </li>
    <li>
      <a href="#" class="icon-terminal"></a>
    </li>
    <li>
      <a href="#" class="icon-pacman"></a>
    </li>
  </ul>
</div>