CSS心形按鈕可以增加頁面的可愛度，也可以用來表示愛或者喜歡的情感。下面我們來一步步學習如何編寫一個CSS心形按鈕：

.btn {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f44336;
position: relative;
overflow: hidden;
transition: all 0.5s ease;
}
.btn:hover {
transform: scale(1.2);
}
.btn:before,
.btn:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: #fff;
transform: rotate(45deg);
transition: all 0.5s ease;
}
.btn:before {
top: -50%;
left: 0;
}
.btn:after {
top: 0;
left: -50%;
}
.btn:hover:before,
.btn:hover:after {
transform: rotate(135deg);
}

上面的代碼中，首先創建了一個寬和高都為100px的圓形按鈕，并設置了圓角為50%，背景色為#f44336。同時，給按鈕設置了相對定位和溢出隱藏屬性。當鼠標懸停在按鈕上時，通過hover偽類將按鈕的縮放比例擴大至1.2倍。

接下來，在按鈕上方和左側分別創建一個正方形，在該正方形上應用了背景色#fff，通過rotate屬性將該正方形旋轉45度，形成一個菱形。使用:before和:after偽類將正方形創建出兩個，分別設置top和left的值為-50%和0（或0和-50%），通過旋轉變成菱形。

最后，給:before和:after偽類使用:hover，將兩個菱形分別旋轉90度，形成心形。該動畫的過渡設置為0.5秒，速率為ease。

通過上述步驟，一個CSS心形按鈕就完成啦！