糖果型CSS3按鈕是一種美觀且方便的UI設計元素,非常適用于項目中的各種交互式組件。下面是一些示例代碼和樣式的介紹:
.btn-candy { background-color: #8bc34a; //按鈕的背景顏色 color: #ffffff; //按鈕文本的顏色 border-radius: 20px; //按鈕的圓角半徑 padding: 10px 20px; //按鈕的內邊距 font-size: 18px; //按鈕文本的字體大小 transition: all 0.3s ease; //設置按鈕動作的過渡效果 } .btn-candy:hover { background-color: #4caf50; //鼠標移上時的按鈕背景顏色 color: #ffffff; //鼠標移上時的按鈕文本顏色 box-shadow: 0px 5px 0px 0px #3e8e41; //鼠標移上時的按鈕陰影效果 transform: translateY(-5px); //鼠標移上時的按鈕移動效果 }
通過使用以上樣式,我們就可以將一個普通的按鈕變成一個漂亮的糖果型按鈕。同時,我們還可以根據自己的需要對樣式進行修改和定制,打造更加獨特和吸引眼球的交互式設計元素。