びるのブログ回転するUFO

HN「びる」の雑記 サブブログです。 メインブログは、http://funnypainter.wordpress.com/ です。
・ びるのブログ 各カテゴリー最新5記事 一覧                        ・ 全ての記事を表示する(サイトマップ)
Top Page > Web > Sexy Buttonsで角丸ボタン

Sexy Buttonsで角丸ボタン

このエントリーをはてなブックマークに追加
冗談で作った「簡易バルスボタン」に少し手を加えました。
(IE8で動作するよう修正しました。2011.12.21現在)
  • 簡易バルスボタン

  • 天空の城ラピュタの無料素材サイトから、壁紙やラインやアイコン素材を借りて装飾しました。
    少しですがラピュタ風の演出が出来たような気がします。

    先週作ったボタンは、もともとCSSで a や a:hover のセレクタをプロパティで装飾を加えて作ったのですが、ちょっと物足りない感じがありました。 何せ急ごしらえだったもので。 (前回のエントリー参照)

    そこで、CSSだけでスタイリッシュな角丸ボタンが作れる『Sexy Buttons』を使ってみることにしました。
    『Sexy Buttons』は、1400以上のアイコン画像と4種類のスキンとCSSファイルからなるボタンセットです。


    詳しくは、下記のサイトを参照して下さい。
  • CSSだけでスタイリッシュな角丸ボタンが作れる『Sexy Buttons』が便利そう | IDEA*IDEA

  • Downloads - sexybuttons

  • ダウンロード先からSexyButtons_v1.2.zipファイルをダウンロードします。
    展開するとついてくるindex.htmlの内容を見れば、様々なボタンのマークアップの方法がわかります。(英語ですけど雰囲気でなんとか・・・)
    とりあえず、このindex.htmlの内容をいじって使い方を理解しましょう。
    文字のエンコードがUTF-8なので、保存時は注意しましょう。

    ボタンはカラフルなものが用意されています。 ボタンの大きさ等も簡単に指定できます。
    とっても簡単に、角丸ボタンを使うことができます。
    実際にSexy Buttonsのファイルをサーバーにアップするときの注意。
    容量的には小さいのですが、アイコンの数が多いので、必要なものだけ選んでアップするようにした方がよいと思います。



      変更後  

    スクリーンショットにあるように、ツイート時に押す各キャラクターの台詞「バルスボタン」をカラフルで大きなボタンとしました。
    前回のエントリーのスクリーンショットと比較すると、多少見栄えがよくなった気がします。
    まあ、このボタンも次回の放映まで使われることは、まずないと思いますが・・・ まあよかったらご覧ください。
    天空の城ラピュタは「名言」が多いので、もう少し追加しても面白いかな?っと思っています^^。

    似たようなツールは他にもたくさんありますが、特に、Sexy Buttons は、手軽にスタイリッシュなボタンがつくれる便利なツールだと実感しました。 
    自分のサイトに一工夫加えたいと思っている方には、おすすめです。
    関連記事
    スポンサーサイト
    [ 2011/12/16 09:43 ] Web | TB(0) | CM(0)
    コメントの投稿












    管理者にだけ表示を許可する
    トラックバック
    この記事のトラックバックURL

    アクセスカウンター
          

    現在の閲覧者数 :       
    プロフィール

    びる

    Author:びる
    こんにちは、funnypainterこと、HN『びる』と申します。最近は、TogetterのまとめやWordPress等CMSに興味あり。

    ★びるのプロフィール★

    ソーシャルブックマーク
    Yahoo!ブックマーク Googleブックマーク はてなブックマーク livedoorClip del.icio.us newsing FC2 
    Technorati ニフティクリップ iza Choix Flog Buzzurl 
    最近の記事+コメント
    全記事表示リンク (サイトマップ)
    ブロとも申請フォーム
    アルバム
    てをつなごう だいさくせん
    Powered By FC2ブログ

    今すぐブログを作ろう!

    Powered By FC2ブログ