心形按鈕(heart button)可用于很多網站和應用,作為一種可愛的設計元素,吸引用戶點擊。這篇文章將介紹使用CSS創建心形按鈕的方法。
.heart-btn { border: none; background-color: #ed5565; color: #fff; font-size: 16px; padding: 8px 16px; border-radius: 20px; position: relative; } .heart-btn:before, .heart-btn:after { content: ""; position: absolute; top: -8px; left: 0; width: 20px; height: 20px; background-color: #ed5565; border-radius: 50%; transform: rotate(45deg); } .heart-btn:before { left: -12px; } .heart-btn:hover:before, .heart-btn:hover:after { background-color: #f37c82; } .heart-btn:hover { background-color: #f37c82; cursor: pointer; }
以上代碼在一個類名為.heart-btn的按鈕元素上創建了心形效果。首先定義了一般樣式,包括背景顏色和字體顏色等。然后通過:before和:after偽元素創建兩個圓形,并旋轉45度。最后使用:hover選擇器為按鈕添加了鼠標懸停效果。
如果需要將按鈕指定為a標簽,需要加上display: inline-block;以確保可以設置寬高。
.heart-btn a { display: inline-block; text-decoration: none; color: #fff; } .heart-btn:hover a { color: #fff; }
使用以上CSS代碼,即可在你的網站或應用中添加可愛的心形按鈕。