CSS 筆記 按鈕樣式 bootstrap套版

可以直接利用Bootstrap的class名稱，進行css的修改。

按鈕樣式設定有三階段:

1.1外觀顏色

1.2按鈕外觀形狀

1.3字形相關

2.hover樣式(滑鼠上移樣子)

3.點擊後樣子

/*按鈕外觀形狀、字形相關*/

.btn-style {
  padding: 1.25rem 2.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  border-radius: 10rem;
}

/*外觀顏色*/

.btn-primary {
  color: #fff;
  background-color: #f4623a;
  border-color: #f4623a;
}

/*滑鼠上移樣子*/
.btn-primary:hover {
  color: #fff;
  background-color: #f24516;
  border-color: #ee3e0d;
}

/*點擊後樣子*/
.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #f24516;
  border-color: #ee3e0d;
  box-shadow: 0 0 0 0.2rem rgba(246, 122, 88, 0.5);
}

文章分類