マウスホバー時にボタンを大きくする

LPやHPが寂しい時にボタンを大きくするって考えがちですよね。
それの良し悪しは置いといて、マウスホバー時にCSSでボタンを大きくする方法を見ていきましょう。

CSSでボタンを大きくする

まずはボタンのHTMLです。

index.html

<button class="btn">ボタン</button>

次にcssです。

styel.css

.btn{
    /*btnを大きくする処理*/
    transition: all 0.3s ease;
    /*btnのcss*/
    width: 200px;
    height: 60px;
    background: aqua;
    color: black;
    border: none;
}
.btn:hover{
    /*btnを大きくする処理*/
    transform: scale(1.15,1.15);
    /*btnのcss*/
    cursor: pointer;
}

以上がマウスホバー時にボタンを大きくする方法です。

ブラウザによってはスタイルが当たらない場合があるので、その際はブラウザごとに必要なwebkitなどの処理を追加してください。