我正在嘗試創建一個帶有 CSS 的按鈕，其中設計添加了一個框陰影來框住與圖示保持在同一位置的右側。在懸停時，按鈕會向右延伸，從而產生您正在拉動標簽的效果。但是，我正在努力添加圖示的元素。
編輯：添加了圖示，但是，如何洗掉錨鏈接中的空白？例如，如果我將 padding top 和 bottom 設定為 0px，文本如何不接觸背景顏色的頂部和底部？似乎有死空間。
代碼筆鏈接
<a class="button" href="" title="">Terms & Conditions<span></a>
CSS
a.button {
display: inner-block;
wdith: 100%;
padding: 0em 4.5em 0em 1em;
background: linear-gradient(90deg, #7D80DA, #8EEDF7);
text-align: center;
align-items: center;
justify-content: center;
font-weight: 800;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
border: none;
border-radius: 5px;
box-shadow: inset -35px 0px 0px #7d80da;
transition: all 0.3s ease 0s;
cursor: pointer;
position: relative;
white-space: nowrap;
}
a.button:after {
content: "\f0a4";
font-family: FontAwesome;
font-size: 15px;
position: absolute;
right: 4%;
}
a.button:hover {
padding-right: 8em;
}
uj5u.com熱心網友回復：
首先，添加位置：相對；使用您的按鈕代碼
并使用此代碼：
a.button:after{
content: '?';
position: absolute;
right: -30px;
/*Your more css here*/
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/367838.html
上一篇：如何使用字串文字中的onclick將物件傳遞給另一個函式
下一篇：如何實作我的CSS過渡到我的網站