CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック | コリス

2020/08/24 175 users コリス inpu input要素 CSS スニペット

検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinpu... 続きを読む

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

2020/03/19 152 users コリス Button モーダル インタラクション スタイ

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ... 続きを読む

[CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons | コリス

2013/06/23 267 users Buttons Sass コリス Compass class

フラットをはじめ、定番の角丸、サークル、アイコン添えなど、さまざまなデザインのボタンを簡単に実装できるSass/Compassで作られたボタンライブラリを紹介します。 Buttons Buttons- GitHub Buttonsのデモ Buttonsの使い方 Buttonsのデモ デモでは、リンクのテキストやbutton要素、input要素にclassを付与するだけで、さまざまなデザインのボタン... 続きを読む

[CSS]さまざまなバリエーションを簡単に利用できる美しいデザインのボタンを実装するチュートリアル | コリス

2012/09/19 115 users コリス Button チュートリアル CSS class

画像は使用せずに、繊細なパターンとグラデーションで美しいボタンをスタイルし、サイズやカラーなどさまざまなバリエーションを簡単に利用できるように実装するスタイルシートのチュートリアルを紹介します。 ベースとなるボタン HTML マークアップは非常にシンプルです。 <a href="" class="button">Button</a> または、button要素でも構いません。 <button cla... 続きを読む

[CSS]要素をボタン風にスタイリングするスタイルシートのテクニック集 | コリス

2009/05/27 248 users コリス Speckyboy CSS span要素 エントリー

Speckyboyのエントリーから、button要素やspan要素などをボタン風にスタイリングするスタイルシートをいくつか紹介します。 22 CSS Button Styling Tutorials and Techniques submit button should look same everywhere How to make sexy buttons with CSS Sexy CSS ... 続きを読む