MATEREATE CONTENTS

アニメーションボタンのデザインイメージ
アニメーションボタン

ボーダーがアニメーションしながら四隅から現れるボタン

ボタンの四隅からアニメーションしながらボーダーが現れるボタンの無料Web素材です。一定のアニメーションを繰り返すので、サイト閲覧者の目を惹くことができると思います。シンプルなデザインながらも、魅力的な動きのあるアニメーションボタンとなっております。

トグルボタンのデザインイメージ
トグルボタン

スイッチ内の背景が変化するシンプルなトグルボタン

ボタンをクリックすると、スイッチ内の背景の色が変化するトグルボタンの無料Web素材です。CSSのみで作成しているため、気軽に実装できます。クリックする度に背景の色も切り替わるため、ON/OFFの切り替わりが分かりやすいトグルボタン素材となっております。

エフェクトボタンの通常時とホバー時のデザイン
エフェクトボタン

丸みを帯びた形に変化し文字の間隔が広がるボタン

ボタンにマウスを置くと背景のデザインが変化し、文字と文字の間隔が広がるボタンの無料Web素材です。ボタンは丸みを帯びたデザインに変化し、背景の色も変化します。文字と文字の間隔も広がる印象的な演出をいたします。シンプルながらもアクセントの効いたエフェクトボタン素材となっております。

3Dボタンの全てのエフェクトイメージ
3Dアニメーション

ホバーすると下からキューブ状に回転するボタン

ホバーすると下からキューブ状に回転し、背景と文字の色が変化するボタンの無料Web素材です。全てCSSアニメーションのみで表現しています。シンプルなデザインながら、立体的にアニメーションするので、ちょっとしたインパクトとアクセントを与えることができるボタン素材でございます。

ボタンの全てのエフェクトのイメージ
エフェクトボタン

文字がフェードイン&アウトしながら色が変化するボタン

ボタンの上にマウスを置くと、フェードイン&アウトをしながら新たな文字が表示され、全体の色が変化するボタンの無料Web素材です。マウスを離しても同じような演出で元のボタンに戻ります。シンプルながらもアクセントの効いた演出をするため、サイト訪問者に印象を与えることができます。

ボタン素材の通常時とホバー時のデザイン
アニメーションボタン

デザインが変化し横のボーダーが揺れるボタン

インパクトのあるホバーエフェクトとアニメーションを使用したリンクボタン素材です。両サイドに配置された「<>」が180度回転し、四角のボタンが丸みを帯びたボタンに変化します。カラーも「枠→文字の色」、「文字→枠の色」と変化します。その後「><」のバーは横に揺れるアニメーションをします。

エフェクトボタンの通常時とホバー時のデザイン
エフェクトボタン

ホバーすると上下部分にラインが現れるボタン

シンプルなホバーエフェクトを使用したボタンのWeb素材でございます。ホバーすると、ボタン内部の上下部分にボーダーラインが現れます。シンプルながらもボーダーラインのエフェクトにより、アクセントの効いたデザインとなっております。

背景が変わるボタンの全てのデザインイメージ
3Dアニメーション

上からパタパタと背景の色が変化するアニメーションボタン

ホバーエフェクトと3Dアニメーションを使用したボタン素材です。マウスをHoverすると、上からパタパタと背景が変化するボタンです。色んなカラーを組み合わせて、思わずクリックしたくなるようなオシャレなアニメーションのボタンを作ることができます。

素材反映のご依頼

MATEREATE CONTENTS

ダウンロードして実装したけど、うまく反映しない…

素材を自身のサイトにも実装したいけどWebコーダーが不在のため、実装して欲しい…

そんな方はぜひお気軽にお申し付けください。


無料お見積り後、コードを整理した上で実装・反映いたします。