在前端開發中，js扁平按鈕的CSS是一個非常重要且常見的技術。扁平風格是當前Web設計的主流趨勢之一，能夠為用戶帶來更加簡潔的視覺感受。然而，扁平按鈕在樣式上的實現并不像傳統按鈕一樣簡單。下面讓我們一起看看如何使用CSS實現js扁平按鈕。

.btn {
display: inline-block;
margin: 0;
padding: 0;
font-size: 14px;
line-height: 36px;
color: #fff;
text-decoration: none;
text-align: center;
border-radius: 4px;
border: none;
cursor: pointer;
transition: all .3s ease;
}
.btn-primary {
background-color: #377dff;
}
.btn-primary:hover {
background-color: #2e69c9;
}
.btn-danger {
background-color: #ff4949;
}
.btn-danger:hover {
background-color: #e64242;
}

如上所示，我們使用了CSS設置了按鈕的基本樣式，包括大小、字體、顏色等等。同時，我們使用border-radius屬性為按鈕添加了圓角效果，使得按鈕看上去更加圓潤。此外，我們設置了按鈕的背景色和鼠標懸停時的背景色。

值得注意的是，我們使用了transition屬性來創建按鈕的漸變效果。通過這個屬性，我們可以實現過渡效果，使得按鈕的背景色在鼠標懸停時慢慢變化，而不是瞬間切換。這種效果能夠使得交互更加自然流暢，用戶更容易理解和接受。

在實際開發中，我們可以根據實際需求對按鈕進行調整和優化，使得按鈕的樣式和功能更加符合用戶需求。同時，我們可以使用CSS框架如Bootstrap、Foundation等來快速搭建基本的頁面框架，并使用現有的CSS類來實現按鈕樣式等效果。