如何解决带右箭头的CSS按钮
最简单的按钮制作方法?
到目前为止,我已经有了这个,基本上需要右箭头。
.end-btn {
margin-top: 2vw;
background-color: #DAA521;
border: none;
width: 15vw;
height: 3vw;
font-size: 1.5vw;
color: #FFFFFF;
border-radius: 0.5vw;
font-weight: bold;
cursor: pointer;
}
<button class="end-btn"> View profile </button>
解决方法
这是向按钮右箭头的最简单方法。
.end-btn {
margin-top: 2vw;
background-color: #DAA521;
border: none;
width: 15vw;
height: 3vw;
font-size: 1.5vw;
color: #FFFFFF;
border-radius: 0.5vw;
font-weight: bold;
cursor: pointer;
}
<button class="end-btn"> View profile > </button>
如果您可以将外部CSS添加到html中,则也可以使用一些图标,如下所示。
.end-btn {
margin-top: 2vw;
background-color: #DAA521;
border: none;
width: 30vw;
height: 7vw;
font-size: 3vw;
color: #FFFFFF;
border-radius: 0.5vw;
font-weight: bold;
cursor: pointer;
padding: 10px;
}
.end-btn i {
float: right;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="end-btn"> View profile <i class="fa fa-chevron-right"></i></button>
,
最简单的方法是使用fontawesome。使用免费版本,您可以使用以下代码来实现。
<button>View Profile <i class="fas fa-chevron-right"></i></button>
您只需要一个电子邮件地址即可开始。 https://fontawesome.com/start
,
.c-btn{
border: none;
background-color: orange;
padding: 12px 48px 12px 24px;
border-radius: 4px;
color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.41' height='12' viewBox='0 0 7.41 12'%3E%3Cpath d='M10,6,8.59,7.41,13.17,12,16.59,10,18l6-6Z' transform='translate(-8.59 -6)' fill='%23fff'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 24px center;
}
<button class="c-btn">View Profile</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。