Question 244871 in Html Question posted in
Some basic documentation can be found here.

Html – I've been trying to input an arrow icon within a button. Can anyone help me out please?

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.

if anyone knows how to go about this, i would really appreciate the help.

<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;
}
Tags:

2

Answers


  1. 0

    You can get this animation by using this

    CSS:

    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: '0bb';
  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;
}

    HTML

     <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

    Login or Signup to reply.
  2. 0

    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:

    <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:

    .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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search