I am having a bit of difficulty adding an arrow icon within a button. I have been trying different functions and codes but haven't really gotten anywhere. I am trying to add an arrow animation that indicates to the users that this is a shortcut to the desired page.

我有一点困难添加一个箭头图标内的按钮。我一直在尝试不同的功能和代码，但还没有真正得到任何地方。我试图添加一个箭头动画，向用户表明这是一个快捷方式所需的页面。

<a href="#">
<button class="submit" title="Book Now">Book Now <i class="fas fa-angle-right"></i></button>
</a>  

#booking button.submit {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  background-color: lightblue; /* sets the background color of the button */
  color: black; /* sets the text color of the button */
  border: none; /* removes border from the button */
  border-radius: 5px;
  padding: 10px 20px; /* adds padding to the button */
  font-size: 20px; /* sets the font size of the button */
  cursor: pointer; /* changes cursor on hover to indicate button is clickable */
  margin-bottom: 5px;
  margin-left: 30px;
}

#booking button.submit:hover {
  color: grey;
}

button.submit {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  background-color: lightblue; /* sets the background color of the button */
  color: black; /* sets the text color of the button */
  border: none; /* removes border from the button */
  border-radius: 5px;
  padding: 10px 20px; /* adds padding to the button */
  font-size: 20px; /* sets the font size of the button */
  cursor: pointer; /* changes cursor on hover to indicate button is clickable */
  margin-bottom: 5px;
  margin-left: 30px;
}

button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

button:hover span {
  padding-right: 25px;
}

button:hover span:after {
  opacity: 1;
  right: 0;
}

 <a href="#">
        <button class="submit" title="Book Now"><span>Book Now</span></button>
</a>

Source Code:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate1

源代码：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate1

so you want to make it so that when you hover over the button, the arrow rotates in the other direction? In other words, when hovered, it should look like it has the fa-angle-left class?

所以你想让它在你悬停在按钮上时，箭头朝另一个方向旋转？换句话说，当它悬停时，它应该看起来像是有向左角度的类？

You can do this by several ways:

您可以通过以下几种方式完成此操作：

1. Just add this style:

   
   

   .submit:hover .fa-angle-right {
   transform: rotate(180deg);
   }

   
   



2. You can create 2 'i' and hide/display these elements, when necessary

   
   

html:

Html：

<a href="#">
    <button class="submit" title="Book Now">
        Book Now <i class="fas fa-angle-right default-icon"></i><i class="fas fa-angle-left hover-icon"></i>
    </button>
</a> 

css:

Css：

.submit {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;/
}

.default-icon {
    transition: opacity 0.3s ease-in-out;
}

.hover-icon {
    display: none;
    transition: opacity 0.3s ease-in-out;
}

.submit:hover .hover-icon {
    display: inline-block;
    opacity: 1;
}

.submit:hover .default-icon {
    opacity: 0;
}