[B! css][button] aoiasabaのブックマーク

ボタンやアイコンやナビゲーションなど、クリック・タップ可能な領域のサイズを広くする実装方法のまとめ

ボタンやアイコン、ナビゲーション、サイドバーなど、さまざまなUI要素に適したクリック・タップ可能な領域のサイズを拡張する実装方法を紹介します。 Enhancing The Clickable Area Size by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにユーザーエクスペリエンスの観点ボタンのクリック可能な領域を拡張するリンクのクリック可能な領域を拡張するアイコンのクリック可能な領域を拡張するチェックボックスとラジオボタンのクリック可能な領域を拡張するサイドバーのクリック可能な領域を拡張するセクションヘッダのクリック可能な領域を拡張する疑似要素を使用してクリック可能な領域を拡張する終わりにはじめに例えば、ボタンやリンクなどの要素をクリック・タップしようとした時に

aoiasaba 2023/07/21

css
button

リンク

コピペで絶対使いたくなるCSSボタン 25選 | SONICMOOV LAB

動きがシャープなStylish Social Buttons マウスオーバー時の背景の動きがシャープです。送信完了が分かりやすいSend button with a transition クリックして送信完了するまでの過程が分かりやすいです。視覚をさらにプッシュするMaterial Button Hover マウスオーバーでさらに視覚に対してプッシュしてくれます。広がるメニューAnimated Material Design Button マウスオーバーでメニューが広がります。 tの文字にも注目Twitter Button Concept 遊び心があるボタンです。隠しボタンHidden door twitter button ツイッターフォローボタンで動きを付けたい時にオススメです。立体的なボタンSquishy Toggle Buttons CSSだけでの表現でこんなボタンも。

aoiasaba 2022/07/25

button
css

リンク

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

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。さらに、よく使用されるボタンのスタイル方法をはじめ、ボタンの実装時にある落とし穴の解決方法についても明らかにします。 Styling The Good Ol' Button Element by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 button要素のデフォルトのスタイル button要素の基本的なデザインアイコン付きのボタン複数行のボタンアンカーリンクとしてのa要素とbutton要素アウトラインボタンの

aoiasaba 2020/03/19

button
css

リンク

20 Amazing Pure CSS Animated Buttons - 1stWebDesigner

If you want to give your website a little extra flair, you’ll definitely want to investigate and utilize CSS animated buttons. These bits of code add a layer of interactivity to your website that most site visitors will appreciate. Plus, they can be used to add a sense of dynamics and further help to solidify your brand. If you’re not sure where to start in getting these buttons for your site, how

aoiasaba 2020/03/03

リンク

CSSのグラデーションボタンをホバー（マウスオーバー）でアニメーションさせる方法

CSSのグラデーションボタンをホバー（マウスオーバー）でアニメーションさせる方法 CSSで作ったボタンをマウスオーバーしたときに色を変えたい場合、「transition」を使うとふわっと色が徐々に変化するアニメーション効果を簡単に加える事ができます。「transition:1s」なら1秒、「transition:0.5s」なら0.5秒のアニメーションになります。

aoiasaba 2020/02/25

リンク

WORK AND WONDER【WAW】｜東京 [日本橋・赤坂・神田・品川・上野]　日鉄興和不動産の会員制シェアオフィス

いま、あらゆる業界で、未来の社会を見据えたイノベーションが求められています。でも、オフィス環境はそれに対応しているでしょうか？もっと人や社会と垣根なく繋がれる場へ。もっと健康を大切にできる場へ。これまでの常識を取り払い、イノベーション＝WAWを生み出しやすくするために、どんなWONDERが必要かを徹底的に考えたシェアオフィスをつくっていきます。業界や、企業/組織の大小は関係ありません。私たちはWAWを生み出したいと思う全ての人たちをお待ちしています。オフィスに OPENNESSとWELLNESSを。イノベーション=WAWを生み出すために、2つの大切なテーマがあります。ひとつは、OPENNESS＝開かれた空間で人と人が自由に繋がること。もうひとつは、WELLNESS＝健康な体と心であること。この価値が合わさってはじめて、働く人のWAWが生まれると私たちは考えます。

aoiasaba 2020/01/28

リンク

[装飾系]ボタンデザイン HOVERで左上から斜めに背景の色が変わる - copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

a.cp_btn { display: block; position: relative; width: 160px; padding: 0.8em; text-align: center; text-decoration: none; color: #fff; background: #455A64; border:1px solid #fff; overflow: hidden; } a.cp_btn:after { content:""; position: absolute; top: -100%; left: -100%; height: 100%; width: 160px; background : #fff; opacity: 0.3; transition: .4s; } a.cp_btn:hover:after { top: 0; left: 0; } CSS3などで

aoiasaba 2020/01/20

button
css

リンク

コピペでできるCSSボタンマウスオーバーエフェクト集 | aekana

CSSで表現できるボタンのマウスオーバーのエフェクトをまとめました。ボタンのデザインを充実させるとクリック率・コンバージョン率アップにも繋がります。そのままコピー＆ペーストできますので、時間短縮にぜひご活用ください。 ※デモはPC環境でご覧ください 2018/8　CSSボタンデザイン記事を追加しました。コピペでできる立体的なCSSボタンデザイン集 CSSだけで表現できる押したくなるボタンリスト 1. ボタン基本形まずはボタン基本形です。.btnに共通のCSS、.btn+連番にオリジナルのCSSを記述します。フォントの大きさや種類は適宜変更してください。 !importantは当サイトに合わせた記述ですので、基本的に外してください。 <a href="" class="btn btn01">HOVER</a> .btn { padding: 15px 70px; font-weig

aoiasaba 2020/01/20

button
css

リンク

【コピペで簡単実装】アニメーションがカッコイイ！送信ボタン用アニメーションCSS 9選【HTML/CSS/submitボタン】

aoiasaba 2019/12/17

リンク

[CSS]デスクトップ・スマホ対応、浮かんだり光ったりアニメーションするボタンを簡単に実装できるスタイルシート

外部ファイルを一つ加えるだけで、さまざまなボタンを簡単に実装できるスタイルシートを紹介します。鋭角や角丸の矩形、楕円形、ハンバーガーメニューに使われる円形、グラデーションやフラット、ゼリーみたいなボタンもあります。

aoiasaba 2019/11/12

css
button

リンク

ロールオーバーで動く！CSSのみで作るオシャレなボタンデザイン12選！【アニメーション有り】

aoiasaba 2019/08/06

button

リンク

[CSS]もうbutton要素で困らない！ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ

フォームをスタイルするのが苦手、という人は少なくないと思います。中でも、button要素はお問い合わせのようなフォームに限らず、さまざまなページに使用される使用頻度が高い要素です。 button要素はfont-sizeを適用するだけで見た目が大きく変わり、「border: 0;」を適用するとブラウザごとに異なる見た目になります。そんなbutton要素のデフォルトのスタイルを美しくするために、button要素のスタイルの仕組みを紹介します。

aoiasaba 2018/05/17

リンク

CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld

実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ

aoiasaba 2017/11/22

リンク

[CSS]さまざまな要素に利用できる美しいシャドウ、カードやボタンをふわりと浮かび上がらせるスタイルシート

カードやボタンをはじめ、さまざまな要素をふわりと浮かび上がらせる繊細なシャドウを与えるスタイルシートを紹介します。 box-shadowを重ねがけした複雑なスタイルシートですが、スニペットに登録しておくと簡単に利用できます。 Multiple Shadows 繊細なシャドウを与えるスタイルシートカードにシャドウを与えるボタンにシャドウを与えるデモ繊細なシャドウを与えるスタイルシートシャドウはbox-shadowを使用し、複数のシャドウを重ねがけします。カードやボタンなど、さまざまな要素に利用できるので、スニペットに登録しておくと便利です。 .shadow { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 1

aoiasaba 2017/10/25

リンク

CSSで作る！押したくなるボタンデザイン100（Web用）

.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transf orm: translateY(4px); transf orm: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }