CSS按鈕文字樣式練習

寫網頁時常需要用到按鈕, 以往為了使用好看的文字字型和按鈕圖樣, 真的都是做圖來用, 不過做圖真的是術業有專攻, 不是我等玩票的可以勝任, 近來想想是否可以用CSS來取代製作圖檔, 又能更方便的替換文字或增加按鈕, 因此開始練習使用CSS來做。我練習的Code放在fiddle這裡, 如果沒有被清掉的話, 可以自行取用參考。

這次使用到的有CSS, 但更進一步來說是搭配<svg>的用法, 不知道有沒有其他更好的方式, 目前已知即將逝去的IE, 仍是不合群, 硬是達不到我想要的效果, 我只好放生它了。

先來看一下html的部份:

<div class="divbtn">
<svg width="116" height="30" xmlns="http://www.w3.org/2000/svg">
<text class="svgtxt" x="8" y="22" fill="#a21f5d" textLength="100" lengthAdjust="spacingAndGlyphs">Honorificabilitudinitatibus</text>
</svg>
</div>

• <div>: 由於我需要一個像按鈕的橫向方框, 所以在<svg>外面再加一個<div>, 同時也針對它加一些CSS樣式, 這裡我做了漸層色的處理
• <svg>: 按著網路上的通例, 這裡xmlns不可少, width及height可不加, 但不加時是有預設值的, 分別是300及150, 如果你需要更精確的控制, 建議還是加上width及height吧

• <text>: 設定文字樣式,
  • class: 基本上文字可套用的CSS都可以用
  • x/y: 代表文字在上面這個<div>中的定位點
  • fill: 文字的顏色。class樣式內的設定似乎無法通透出來, 所以可以在此加fill的顏色
  • textLength: 文字的總寬度, 應小於<div>寬度, 才能呈現文字縮在按鈕裡面的樣子
  • lengthAdjust: 這應該是裡面最重要的設定。我需要不論文字多寡, 文字可以依上面設定的textLength寬度, 自動縮放, 這時就可以設定參數值為spacingAndGlyphs

再來看CSS

.divbtn {
  border: 1px red solid;
  cursor: pointer;
  background: linear-gradient(to bottom, white 20%, pink 95%);
  width: 116px;
  height: 30px;
}
.svgtxt {
  font-size: 19px;
  font-weight: bold;
  font-family: "Microsoft JhengHei","Apple LiGothic Medium",Tahoma, Verdana, sans-serif;
  text-align: center;
  text-shadow:
    -0.7px -0.7px 0 #fff,
    0.7px -0.7px 0 #fff,
    -0.7px 0.7px 0 #fff,
    0.7px 0.7px 0 #fff;
}

以下就是做出來的效果:

不過這裡有一個情況, 或許得自行調配一下。當你的文字寬度和按鈕文字字數相對來說, 文字字數太少的話, 會發現不論中、英文字, 都會被橫向拉長, 但這樣並不好看(如上面第一個"昭明文選"和第四個"honor"的文字), 我臨時的解法是在每個字中間都加上一個空白, 看來就會比較正常了(如第二個"昭明文選")。