SHEET K-49-U01

UIの部品 U01

ガラスのボタン

背景が透けるガラスの板のようなボタン。触れると光の反射が流れ、押すと奥へ沈み込む。画像を使わず、CSS だけで描く。

01動く実物

見て、動かして確かめる。

押してみてください。同じボタンを、3つの背景に置いています。

  • 元の見た目灰色の地に点の格子

  • 写真の上後ろの写真が、板越しににじむ

  • 色の上自社の色になじませる

Petr Knoll「Glass Button」をもとに作りました(© Petr Knoll/利用条件(MIT))

許諾文(MIT)を見る
MIT License

Copyright (c) Petr Knoll (https://codepen.io/Petr-Knoll/pen/QwWLZdx)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

02この見せ方のよいところ

押した手応えが、指に返る。

  • 押した手応えがある

    押すとボタンが奥へ傾き、影が縮み、縁の光が回る。画面の上でも「押し込んだ」感触が返るので、押せたかどうか迷わない。

  • 触れる前から、押せると分かる

    マウスを重ねると、表面の反射がすっと流れて少し沈む。飾りの文字ではなく、押せる部品だと自然に伝わる。

  • 背景を選ばない

    板が透けて、後ろの色や写真がにじんで見える。写真の上にも、色の上にも、なじんだまま置ける。

  • 画像を使わず、軽い

    CSS だけで描くので、文字を差し替えても、大きさを変えても崩れない。画像を作り直す手間も、読み込みの重さもない。

03向いている内容

こんな場面に向いています。

  • 申し込み・お問い合わせなど、いちばん押してほしいボタン
  • 写真や映像の上に置くボタン
  • 1画面に1つだけの、大事な操作
  • 落ち着いた色のサイトに、上質さを足したいとき

04無料相談

まずは、御社の業務についてお聞かせください。

導入の相談だけでも構いません。

無料相談を申し込む
  • 初回のご相談は無料です
  • オンラインでも対応します
  • ITに詳しくなくても大丈夫です
無料相談を申し込む