Naoki Otsu

ボタンのデザインを変えずに、クリック領域だけ広げるTips

2016-09-18

CSSシークレット」で書かれていた備忘録で、言葉では伝えるのが難しいですが、
開発していると、ボタンそのもののwidthとheightでは領域が狭くて、ユーザーさんはクリックしにくい、
ただそのボタンのデザインは変更せずに、クリックできる領域だけを広げたいという時があります。そんな時の実装方法です。

実装方法

擬似要素を使って下記のように実装します。

.target {
    position: relative;
}
.target:before {
    content: '';
    position: absolute;
    top: -15px; bottom: -15px; right: -15px; left: -15px;
}

上記の場合、ボタンの周りに15pxクリック領域が出来ます。

他のやり方も

擬似要素を既に使っている時は、ボーダーを使ったやり方もあります。

.target {
    border: 15px solid transparent;
}

この場合、ボタン領域に15pxの透明なボーダーが出来て領域が広がります。

もしこれでボタンの背景が広がってしまう場合は、background-clip: padding-box;を指定することで回避することもできます。

.target {
    border: 15px solid transparent;
    background-clip: padding-box;
}