Hover.css

CSS3 寫的 Hover 效果,內容涵蓋 2D、背景、Icon、邊框、陰影和光暈、各種方向的對話框及折角的轉換,部分效果需要使用新式的瀏覽器才能支援,以 MIT 的方式對外授權釋出,可以自由應用在各式連結、按鈕、Icon上。如果要加上 Icon 的效果,請另外下載 FontAwesome (如何使用 FontAwesome),支援 less 及 scss。

  1. 效果預覽:Hover.css
  2. Hover.css 下載:下載
  3. 簡單的教學:Tutorial and Introduction

簡單的使用教學

基本的使用原理:動態效果由 hover.css 提供,樣式則要自己定義。
因此使用的時候你會有兩個 css 檔,一個是下載的 hover.css,hover.css 決定按鈕 hover 後的動態效果。
另一個則是你自己定義的樣式。自己定義的樣式決定按鈕的外觀長什麼樣子。

  1. 首先請先下載 Hover.css
  2. 解壓縮後,點選名稱為 css 的資料夾,將 hover.css 引用到 head 的位置,如下
    <link href="css/hover.css" rel="stylesheet" media="all">
  3. 接著定義按鈕的外觀,你可以寫成獨立的 css 樣式檔,也可以寫在 head 的 style 中。樣式內容如下:
    .button {
        display: inline-block;
        padding: 1em;
        background-color: #79BD9A;
        text-decoration: none;
        color: white;
    }
    
  4. 在 body 標籤裡,新增一個連結,連結的內容為
    <a href="#" class="button">這是按鈕<a>

    這時開啟瀏覽器,你因該會看到上一步定義好的樣式效果,畫面如下:

  5. 接著我們要引入 hover.css 的效果; hover.css 的 class 命名有一些基本的規則:例如,他們都以 hvr- 的前綴當開頭,都是小寫,遇到空格請加「-」。
    以淡入淡出 Fade 來說,他在 hover.css 的名稱為 hvr-fade;
  6. 你需要為剛剛的 a 連結增加一組名稱為 hvr-fade 的 class (更多效果的 class 可以從剛剛下載的 zip 或官網中找到),Code 如下:

    <a href="#" class="button hvr-fade">這是按鈕<a>
  7. 接著請存檔並開啟瀏覽器預覽,完成。 (建議使用 Chrome、Firebox 或 Safai,舊版的 IE 並不支援淡入淡出的效果)

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料