我今天在建網站時，陷入了一個煩惱之中，到底是選擇簡約俐落，還是走上華麗繽紛的風格？是要選擇簡約俐落，還是繽紛活潑？如果你也有相同的煩惱，那你來對地方了！今天，月鹿盒子將與你分享一些超棒code pen上的css button。無論是參考還是直接用，都大量減少時間和讓網站更快的變得好看！
andrew wierzba的3個可愛邊框動畫
第一條動畫會環繞著按鈕的長方形邊框，然後悄悄滑成為下邊框。
第二個動畫是邊框線條會從右上角慢慢消失。
第三個按鈕的邊框會從左邊慢慢消失，然後一個酷酷的打勾框框會在左邊出現。
See the Pen Box/Button Hovers by andrew wierzba (@andrewwierzba) on CodePen.
Christina Deemer的可愛下載中風格按鈕
作者用了sass, 下面我有放全html版的, 有需要的話把style裡的code複製到css檔案就可以了
See the Pen button with cute hover state by Christina Deemer (@cahdeemer) on CodePen.
<style>
.Button-style {
display: block;
padding: 0.6em 0.88em;
background: linear-gradient(to right, #e66465 50%, #fff 50%);
background-size: 200% 100.5%;
background-position: right bottom;
font-family: 'Montserrat', sans-serif;
font-size: 1.25em;
color: #020202;
border: none;
border-left: 0.20em solid #e66465;
box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.08);
transition: all 0.5s ease-out;
}
.Button-style:hover {
background-position: left bottom;
color: white;
}
</style>
<body>
<button class="Button-style">Click</button>
</body>James Bosworth的藍色動畫按鈕
想要這個按鈕的畫把作者寫的Sass代碼複製到CSS文件中就可以了。下面也有完整的HTML代碼版本。
See the Pen Button Drop Shadow by Robert Miller (@iamrobertmiller) on CodePen.
<style>
.Button-style {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background: #fff;
width: 100px;
padding: 20px 30px;
border: 5px solid #4ac0ee;
color: #4ac0ee;
font-weight: bold;
text-transform: uppercase;
text-align: center;
z-index: 2;
transition: all 0.15s 0.15s ease-out;
}
.Button-style:after,
.Button-style:before {
position: absolute;
width: 100%;
max-width: 100%;
top: 100%;
left: 0;
bottom: -10px;
content: '';
z-index: 1;
transition: all 0.15s 0.15s ease-out;
}
.Button-style:before {
background: #4ac0ee;
top: 10px;
left: -15px;
height: 100%;
width: 15px;
}
.Button-style:after {
width: 100%;
background: #4ac0ee;
right: 0px;
left: -15px;
height: 15px;
}
.Button-style:hover {
background: #4ac0ee;
color: #fff;
margin-left: -7.5px;
margin-bottom: -7.5px;
}
.Button-style:hover:after,
.Button-style:hover:before {
top: 100%;
left: 0;
bottom: 0px;
}
.Button-style:hover:before {
top: 0px;
left: 0px;
width: 0px;
}
.Button-style:hover:after {
right: 0px;
left: 0px;
height: 0px;
}
</style>
<body>
<button class="Button-style">Click</button>
</body>mhousetree的會飛出來的可愛按鈕
See the Pen Pop-up button by mhousetree (@mhousetree) on CodePen.
TechAcademy的10個超可愛css按鈕設計(button design css)
可愛粉紅色雙線按鈕
粉紅色的雙線加上留白之美的按鈕。
See the Pen Button01 by HO-Cosmos (@ho-cosmos) on CodePen.
可愛粉色縫線按鈕
這個縫線按鈕看起來超棒給粉彩馬卡龍色主題或者作為極簡風格中的強調亮點顏色。
See the Pen Button06 by HO-Cosmos (@ho-cosmos) on CodePen.
<style>
.Button-style {
font-size: 18px; /* 字體大小為18像素 */
display: inline-block; /* 讓按鈕內容水平排列 */
padding: 0.4em 1em 0.2em; /* 調整內邊距 */
color: #ffffff; /* 文字顏色為白色 */
border: #ffffff dashed 1px; /* 邊框為白色虛線，寬度為1像素 */
box-shadow: 0 0 0 0.2em #ff99cc; /* 添加陰影效果 */
border-radius: 2.5px; /* 邊框圓角半徑為2.5像素 */
background-color: #ff99cc; /* 背景顏色為粉紅色 */
cursor: pointer; /* 將滑鼠指針設置為手指著的感覺 */
}
</style>
<body>
<button class="Button-style">Click</button>
</body>Tiffany Rayside的手繪風格按鈕
See the Pen Imperfect Buttons by Tiffany Rayside (@tmrDevelops) on CodePen.
Christian的6個純 CSS 動畫按鈕
See the Pen Six Pure CSS Button Hover Animations by Christian (@CTNieves) on CodePen.
Yuhomyan的麻糬感按鈕
See the Pen Mochi Animation by Yuhomyan (@yuhomyan) on CodePen.
Webデザインもぐら的20個可愛實用按鈕
巧克力色滑溜感動畫按鈕
See the Pen Button by Webデザインもぐら@noma (@mogumogu_noma) on CodePen.
巧克力色下陰影動畫按鈕
See the Pen Button2 by Webデザインもぐら@noma (@mogumogu_noma) on CodePen.
CSS SCAN的92個實用按鈕
作者沒有寫在codepen上面 所以我就做了一個他的btn 56來當sample 下面是全html可以直接複製
<style>
.button-56 {
align-items: center;
background-color: #fee6e3;
border: 2px solid #111;
border-radius: 8px;
box-sizing: border-box;
color: #111;
cursor: pointer;
display: flex;
font-family: Inter, sans-serif;
font-size: 16px;
height: 48px;
justify-content: center;
line-height: 24px;
max-width: 100%;
padding: 0 25px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-56:after {
background-color: #111;
border-radius: 8px;
content: "";
display: block;
height: 48px;
left: 0;
width: 100%;
position: absolute;
top: -2px;
transform: translate(8px, 8px);
transition: transform .2s ease-out;
z-index: -1;
}
.button-56:hover:after {
transform: translate(0, 0);
}
.button-56:active {
background-color: #ffdeda;
outline: 0;
}
.button-56:hover {
outline: 0;
}
@media (min-width: 768px) {
.button-56 {
padding: 0 40px;
}
}
</style>
<body>
<button class="button-56" role="button">Button 56</button>
</body>Vincent Van Goggles的45個實用按鈕
See the Pen Modern Button Styles - 45 CSS Only Buttons by Vincent Van Goggles (@Gogh) on CodePen.
FreeFrontend的100+ CSS 實用按鈕
這網站超推 收集了一堆有用的code
See the Pen Aqua Button (pure css) by Simon Goellner (@simeydotme) on CodePen.
結語
月鹿盒子希望這些精選可愛的 CSS 按鈕設計能為幫助到你。趕快試試看它們在各種專案上面吧!
月鹿盒子推薦這10個(其實有更多啦w 對所以我現在要來更新了)超可愛實用的css按鈕設計。非常希望這些精選的可愛按鈕可以給你一些靈感，高速使用這些可愛的 CSS 按鈕設計來為你的網站或專案增加一些生動的感覺。
