8.1 其他按鈕樣式定義

示例：定義其他按鈕樣式

• 定義圓形圖標按鈕樣式

<div class="ui circular icon button"><i class="settings icon"></i></div>

• 定義橢圓圖標按鈕樣式

<div class="ui circular button"><i class="settings icon"></i></div>

• 按鈕的狀態--激活狀態

<div class="ui active button"><i class="setting icon"></i> </div>

• 按鈕的狀態--鎖定狀態

<div class="ui disabled button"><i class="setting icon"></i> </div>

??在定義按鈕狀態的時候，必須要有jQuery的支持。

示例：定義不同顏色的按鈕樣式

• 定義不同顏色的按鈕

<button class="ui red button">red</button> <button class="ui green button">green</button> <button class="ui blue button">blue</button> <button class="ui black button">black</button>

• 按鈕顏色反轉

<button class="ui inverted red button">red</button> <button class="ui inverted green button">green</button> <button class="ui inverted blue button">blue</button> <button class="ui inverted black button">black</button>

示例：定義條件按鈕

<div class="ui buttons"><button class="ui green button">yes</button><i class="or"></i><button class="ui red button">no</button> </div>

示例：定義不同大小的按鈕

??在Semantic-UI中定義了8組不同大小的按鈕；

<button class="mini ui button">Mini </button> <button class="tiny ui button">Tiny </button> <button class="small ui button">Small </button> <button class="medium ui button">Medium </button> <button class="large ui button">Large </button> <button class="big ui button">Big </button> <button class="huge ui button">Huge </button> <button class="massive ui button">Massive </button>

8.1 小結

??在Semantic-UI中定義了很多按鈕樣式，這些按鈕樣式都是通過semantic.css中的樣式進行加載的，可以設置不同大小的按鈕和圖標與按鈕結合使用，定義一組圖標等。

轉載于:https://www.cnblogs.com/jie-fang/p/10279530.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的8、Semantic-UI之其他按钮样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。