10個超可愛的css按鈕設計

月鹿盒子推薦一系列超可愛的按鈕設計,可以直接複製CSS 一起使用!代碼都可以在codepen上找到,非常歡迎去支持原作者

我今天在建網站時,陷入了一個煩惱之中,到底是選擇簡約俐落,還是走上華麗繽紛的風格?是要選擇簡約俐落,還是繽紛活潑?如果你也有相同的煩惱,那你來對地方了!今天,月鹿盒子將與你分享一些超棒code pen上的css button。無論是參考還是直接用,都大量減少時間和讓網站更快的變得好看!

andrew wierzba3個可愛邊框動畫

第一條動畫會環繞著按鈕的長方形邊框,然後悄悄滑成為下邊框。

第二個動畫是邊框線條會從右上角慢慢消失。

第三個按鈕的邊框會從左邊慢慢消失,然後一個酷酷的打勾框框會在左邊出現。

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.

Christian6個純 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 按鈕設計能為幫助到你。趕快試試看它們在各種專案上面吧!

月鹿盒子推薦這10個(其實有更多啦w)超可愛實用的css按鈕設計。非常希望這些精選的可愛按鈕可以給你一些靈感,高速使用這些可愛的 CSS 按鈕設計來為你的網站或專案增加一些生動的感覺。

延伸閱讀

借物Lady

借物Lady

三分鐘熱度x0國語言者xイケメン愛好者

文章: 23

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *