CSS擬物按鈕是一種非常流行的UI/UX設計元素,能夠給網站帶來簡潔、時尚的感覺。接下來,我們為您帶來了一些常用的CSS擬物按鈕樣式。
/* 基礎擬物按鈕 */
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 3px 3px 6px #ccc;
cursor: pointer;
transition: all .2s ease-in-out;
}
.btn:hover {
background-color: #f2f2f2;
box-shadow: 3px 3px 6px #ddd;
transform: translateY(-2px);
}
/* 扁平擬物按鈕 */
.flat-btn {
display: inline-block;
padding: 10px 20px;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: none;
cursor: pointer;
transition: all .2s ease-in-out;
}
.flat-btn:hover {
background-color: #f2f2f2;
box-shadow: none;
transform: translateY(-2px);
}
/* 3D擬物按鈕 */
.btn-3d {
display: inline-block;
padding: 10px 20px;
background-color: #fff;
border: none;
border-radius: 10px;
box-shadow: 3px 3px 6px #ccc;
cursor: pointer;
transition: all .2s ease-in-out;
}
.btn-3d:hover {
background-color: #f2f2f2;
box-shadow: 3px 3px 6px #ccc;
transform: translateY(-2px);
}
/* 背景漸變擬物按鈕 */
.btn-gradient {
display: inline-block;
padding: 10px 20px;
background-image: linear-gradient(to right, #5c6bc0, #42a5f5);
border: 2px solid #eee;
border-radius: 10px;
box-shadow: 3px 3px 6px #ccc;
cursor: pointer;
transition: all .2s ease-in-out;
color: #fff;
}
.btn-gradient:hover {
background-image: linear-gradient(to right, #42a5f5, #5c6bc0);
box-shadow: 3px 3px 6px #ddd;
transform: translateY(-2px);
}
以上是一些常用的CSS擬物按鈕樣式,可以根據頁面需要進行選擇使用。希望本文對您有所幫助。