ボタンを可愛くするよ

公開日: 2016/01/13 0 0 0 1

ホタンを可愛くしてみよう

ここからダウンロード可能です
https://github.com/IanLunn/Hover

こちらでも同じです

HOVER

1 ファイル 696.09 KB

ダウンロード

ダウンロードしたファイルを解凍してCSSフォルダーをFTPでアップロード
子テーマに入れました

呼び出すコードをheader.phpに書きます

子テーマの時
<link href="<?php echo get_stylesheet_directory_uri() ?>/css/hover-min.css" rel="stylesheet" media="all">

テーマ
<link href="css/hover-min.css" rel="stylesheet" media="all">

または
<style>
@import url("http://keitai-sim.com/css/hover-min.css");
</style>


<!-- Font Awesomeを利用したい場合は -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">

cssに追加します
自分の好きな大きさや色に変更

.button {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #777;
    border-radius: 3px;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    line-height: normal;
    margin-bottom: 20px;
    padding: 6px 12px;
    text-decoration: none;
}

お気に入りボタン
float
Push
Pop
Buzz Out

Outline In
Round Corners
Rectangle Out
Shadow
Grow Shadow

Curl Top Left
Curl Top Right
Curl Bottom Right
Curl Bottom Left