个人中心
gpt4 book ai didi

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

转载 作者：bug小助手 更新时间：2023-10-25 18:10:21 28 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。如果您需要一个看起来像按钮的链接，只需使用并使用css来更改其外观。


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

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

28 4 0
文章推荐： In what situation `..._or()` is better than `..._or_else(|| {})` and why?(在什么情况下`..._or()`比`..._or_Else(||{})`好？为什么？)
文章推荐： What are the cases when the smart cast doesn't work?(智能演员阵容不起作用的情况是什么？)
文章推荐： Change Region prevents user interaction with the map(更改区域阻止用户与地图进行交互)
文章推荐： Using Spring RSocket in a traditional Servlet-based Spring application(在传统的基于Servlet的Spring应用程序中使用Spring RSocket)
bug小助手
个人简介

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

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