我试图在悬停按钮上同时设计一个丝带形状的按钮,并且应该在两端都显示水平线和图标。
.right-left-flag {
position: relative;
background: black;
padding: 22.1px 40px;
color: #fff;
text-transform: uppercase;
}
.right-left-flag:before,
.right-left-flag:after {
border-color: #000 transparent;
top: 0;
}
.right-left-flag:before,
.right-left-flag:after {
border-style: solid;
height: 0;
width: 0;
display: block;
content: "";
position: absolute;
}
.right-left-flag:before {
left: -19.5px;
border-width: 33px 0 28.5px 20px;
}
.right-left-flag:after {
right: -19.5px;
border-width: 33px 20px 28.5px 0;
}
<a href="#" class="right-left-flag">Read More</a>
答案 0 :(得分:0)
希望这会帮助您了解如何做。
您可以将任何字体图标添加到content
中跨度的后和前元素。
.right-left-flag {
position: relative;
background: black;
padding: 22px 40px;
color: #fff;
text-transform: uppercase;
top: 30px;
left: 30px;
display: inline-flex;
}
.right-left-flag:before,
.right-left-flag:after {
border-color: #000 transparent;
top: 0;
}
.right-left-flag:before,
.right-left-flag:after {
border-style: solid;
height: 0;
width: 0;
display: block;
content: "";
position: absolute;
}
.right-left-flag:before {
left: -19.5px;
border-width: 33px 0 28.5px 20px;
}
.right-left-flag:after {
right: -19.5px;
border-width: 33px 20px 28.5px 0;
}
.right-left-flag:hover>span {
opacity: 1
}
.right-left-flag>span {
opacity: 0;
position: absolute;
left: 5px;
right: 5px;
top: 50%;
transform: translateY(-50%);
height: 1px;
background: #fff;
transition: all .2s;
}
.right-left-flag>span:before {
content: ':)';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.right-left-flag>span:after {
content: ':)';
position: absolute;
left: auto;
right: 0;
top: 50%;
transform: translateY(-50%);
}
<a href="#" class="right-left-flag">Read More<span></span></a>