Hubble のオーガニックなボーダーを持つボタン、どう実現している？

HUBBLE のサイトは、トップページのセンター位置にボタンがあります。
このボタン、パッと見てわかるように、ボタンのボーダーが細い部分や太い部分があり、手書きで書いたようなボタンになっています。
また、ボタンの背景がずれたデザインになっています。

単純な CSS では、このようなボーダーを実現することは難しいです。ブラウザ上で画面を拡大してみると、スムーズな線を保って拡大できることから、画像というわけでもなさそうです。SVG を利用して実現する方法も考えられます。

インスペクタで調べていくとわかりますが、実は意外にもアイコンフォントで実現されています。 アイコンフォントをダウンロードして見てみると、3 サイズ分のボタンが存在していました。他にもソーシャルアイコンなどのアイコンも確認できます。

仕掛けを知ってしまえば「そういうものか」と思うかもしれませんが、まだまだいろいろなデザインハックがあるものだなあと思いました。

昔、ちょいちょい MdN という出版社が出していた「web creators」という雑誌でこういう仕掛けの解説記事をよく書いていたのですが、未だにこういう細かいところを見たりするのが好きだったりします。