iT邦幫忙

0

請問CSS用a標籤做連結按鈕的問題

小弟以前在用a標籤做連結按鈕的時候,例如做一個紅色,height:50px,width:50px的按鈕,小弟會用一個div包住a,然後在div的身上下css:height:50px,width:50px,background-color: red 這樣,但是在點擊的時候就變成連結有效區域還是只有小小的a。

後來小弟就在a下display:inline-block來設定寬高和背景色,但是有聽別人說行內元素就保持原樣就好,盡量不要讓它轉為inline-block或block。

所以想請問這個按鈕的例子,各位大大會如何寫?

kekeke iT邦新手 4 級 ‧ 2021-10-12 17:37:20 檢舉
如果要一整個區塊都要有點擊效果,用ul li 來使用可能比較方便一點 ,提供您做參考
請問ul li 的做法是什麼,小弟有點不明白
因為 li 不是 inline-block 就是 block
裡面放著 A TAG ,只要設好寬度 邊界 留白 再加上 hover 效果
就能做出很好的動態按紐

2 個回答

2
毛毛
iT邦新手 3 級 ‧ 2021-10-12 20:14:34
最佳解答

會建議你使用 padding撐大按鈕能按的面積
因為行內元素無法設定寬高!設定的寬高會被視為無效值

另外也不建議直接使用寬高來製作按鈕大小。
至於設定 inline-block,我是個人是覺得,
只要你清楚這個設定是做什麼的,以及需要注意的問題,就可以安心使用,
我自己對於按鈕會這樣設定

.btn {
    display: inline-block;
    padding: 按鈕留白的大小;
    text-decoration: none; // 取消底線
    // CSS 其他樣式...
}

Codepen 示範

畫面展示

當然 ul li 和 div 除了維護方面外,還有 SEO 也有關係

0
Hankz
iT邦新手 3 級 ‧ 2021-10-12 17:35:24

我是懶人 我都用bootstrap

<a class="btn btn-mystyle">這是按鈕</a>

給你參考bootstrap的css(他也是用display: inline-block;)
.btn

.btn {
  display: inline-block;
  font-weight: 400;
  color: #797979;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; }

.btn-mystyle就基於bootstrap再調整成自己想要的樣子

我要發表回答

立即登入回答