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

html css

cba2462001 2021-10-12 17:20:18 ‧ 1702 瀏覽

分享至

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

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

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

qpalzm iT邦研究生 5 級 ‧ 2021-10-12 17:37:20 檢舉

如果要一整個區塊都要有點擊效果,用ul li 來使用可能比較方便一點 ,提供您做參考

cba2462001 iT邦新手 5 級 ‧ 2021-10-12 18:55:51 檢舉

請問ul li 的做法是什麼，小弟有點不明白

窮嘶發發發 iT邦高手 1 級 ‧ 2021-10-13 10:14:06 檢舉

因為 li 不是 inline-block 就是 block
裡面放著 A TAG ，只要設好寬度邊界留白再加上 hover 效果
就能做出很好的動態按紐

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

Mao

iT邦研究生 5 級 ‧ 2021-10-12 20:14:34

最佳解答

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

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

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

Codepen 示範

畫面展示

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

回應
分享
檢舉

登入發表回應

Hankz

iT邦新手 2 級 ‧ 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再調整成自己想要的樣子