按鈕標簽是我們在開發網頁時經常使用的一個元素,通過CSS3中的按鈕樣式,我們能夠讓按鈕變得更加美觀和有吸引力。下面介紹幾種常用的按鈕樣式。
/* 基本按鈕樣式 */ .button{ display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: #fff; border: none; cursor: pointer; } .button:hover{ background-color: #3e8e41; } /* 圓形按鈕 */ .circle-button{ display: inline-block; padding: 10px; background-color: #4CAF50; color: #fff; border-radius: 50%; cursor: pointer; } .circle-button:hover{ background-color: #3e8e41; } /* 3D按鈕 */ .button3d{ display: inline-block; padding: 15px 30px; background-color: #6786C7; color: #fff; border: 1px solid #2E2E2E; cursor: pointer; perspective: 1000px; transform-style: preserve-3d; transition: all 0.3s ease; } .button3d:hover{ background-color: #5B6CB9; color: #fff; transform: translateZ(10px); box-shadow: 0 0 5px #2E2E2E; } /* 漸變按鈕 */ .gradient-button{ display: inline-block; padding: 10px 20px; background: linear-gradient(to right, #4CAF50, #2E8B57); color: #fff; border: none; cursor: pointer; } .gradient-button:hover{ background: linear-gradient(to right, #3e8e41, #2E684E); }
以上是幾種常用的按鈕樣式,當然還有很多其他的樣式可以選擇,開發者可以根據需要選擇最適合自己網頁的樣式。