マウスオーバー時にボタンが微妙に動いてしまします。

#wrap-content .pager_wrapper ul.pager li{
        float: left; 
        width: auto;
        margin: 0px 5px;
        background: -webkit-linear-gradient(0deg, #0083cd 15%, #0ab6e4 60%);
        }
        
#wrap-content .pager_wrapper ul.pager li a{
	display: block;
	width: 100%;
	color: #fff;
	padding: 10px 20px;
    transition: all .4s;
	}
    
#wrap-content .pager_wrapper ul.pager li a:hover{
    background: #fff;
    color: #0083cd;
    border: 1px solid #0083cd; 
    text-decoration: none;
    }

このような形でボタンを作成したのですが、
マウスオーバー時に微妙に動いてしまいます。

動かなくする方法を教えていただきたいです。

kei344

2020/04/27 04:33

（質問文は編集できます）質問文のCSSはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

恐らくこれで直ると思います。

css
1wrap-content .pager_wrapper ul.pager li a{
2  display: block;
3  width: 100%;
4  color: #fff;
5  padding: 10px 20px;
6  transition: all .4s;
7  border: 1px solid transparent;  /* 追加 */
8}