个人中心
gpt4 book ai didi

How to input an arrow icon within a button(如何在按钮内输入箭头图标)

转载 作者：bug小助手 更新时间：2023-10-25 17:52:24 25 4
gpt4 key购买 nike



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

更多回答

It's invalid HTML to put a <button> element inside a <a> element. If you need a link that looks like a button, only use an <a> and use CSS to change the way it looks.

将元素放入元素中是无效的HTML


You can get this animation by using this

你可以通过使用这个来获得这个动画


CSS:

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

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

源代码：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;
}

更多回答

I appreciate you taking the time out to help me. This was exactly what i was trying to do. Thank you bro!!

谢谢你抽出时间来帮我。这正是我想要做的。谢谢你兄弟！！

25 4 0
文章推荐： Django + Celery + Redis(Django+芹菜+Redis)
文章推荐： panic: index out of bounds: index 241, len 92(恐慌：指数越界：指数241，92)
文章推荐： The setState is working only for some values and it does not make any sense [duplicate](SetState仅对某些值起作用，没有任何意义[复制])
文章推荐： How do I add sections side by side in a well panel?(如何在油井面板中并排添加区段？)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com