ゲームなどでよく見る「長押しのボタン」のUIをWEBで表現してみた - Qiita

はじめに スマホゲームやSwitchなどのゲームのUIでよく見る、「長押しボタン」をWEB画面で実装します。 使う技術としては、HTML、CSS、JavaScriptだけで、JavaScriptのライブラリや画像やSVGは使いません。 長押しボタンと言ってもイメージが付かないと思いますので、完成系のGifを用意しました。（なぜか、WEBではあまり見かけないUIですよね...） 実装 1. メータ部分の作成 まずは、メータ部分を作成するのですが、divタグを使って円を作成します。 background-imageにconic-gradientを指定して、円グラフのような見た目ができるスタイルを使っています。