CSS中点击按钮加小三角是一种常见的设计技巧,可以美化页面,有效提升用户体验。// HTML代码 <button class= btn >按钮</button
CSS中点击按钮加小三角是一种常见的设计技巧,可以美化页面,有效提升用户体验。
// HTML代码 <button class="btn">按钮</button> // CSS代码 .btn { position: relative; } .btn::after { content: ""; display: inline-block; border: 4px solid transparent; border-top-color: #fff; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } .btn:hover::after { border-top-color: #333; }
以上代码实现了当鼠标悬停在按钮上时,小三角变成黑色,当鼠标离开按钮时,小三角恢复为白色。
通过使用伪元素::after和定位,实现了小三角的添加,同时为了让小三角在按钮的右侧位置,使用了right属性进行定位,使用transform属性让小三角垂直居中。
使用这种按钮设计技巧可以让页面看起来更加精致,为用户提供更好的点击指示。
粉丝
0
关注
0
收藏
0