javascriptボタンがクリック時に縮む

Question

ボタンをクリックすると、ボタンが小さくなります。 - 収縮を防ぐことはどうですか？

function aaa() { 
 
    document.activeElement.style.backgroundColor = '#B2DD28'; 
 
}

<button type="button" onclick="aaa()">0022</button> 
 
<button type="button" onclick="aaa()">0023</button> 
 
<button type="button" onclick="aaa()">0024</button> 
 
<button type="button" onclick="aaa()">0025</button> 
 
<button type="button" onclick="aaa()">0026</button> 
 
<button type="button" onclick="aaa()">0027</button><br> 
 
<button type="button" onclick="aaa()">0022</button> 
 
<button type="button" onclick="aaa()">0023</button> 
 
<button type="button" onclick="aaa()">0024</button> 
 
<button type="button" onclick="aaa()">0025</button> 
 
<button type="button" onclick="aaa()">0026</button> 
 
<button type="button" onclick="aaa()">0027</button>

Answer 1

ボタンが収縮しない、それは国境が背景とは異なる色であることだけです。おそらく境界線は薄い色のため、白い背景の上には収縮しているように見えます。

ソリューションは、以下のコードのように背景と同じ色に境界線の色を設定するには、次のようになります。

function aaa() { 
 
    document.activeElement.style.backgroundColor = '#B2DD28'; 
 
    document.activeElement.style.borderColor = '#B2DD28'; 
 
}

<button type="button" onclick="aaa()">0022</button> 
 
<button type="button" onclick="aaa()">0023</button> 
 
<button type="button" onclick="aaa()">0024</button> 
 
<button type="button" onclick="aaa()">0025</button> 
 
<button type="button" onclick="aaa()">0026</button> 
 
<button type="button" onclick="aaa()">0027</button><br> 
 
<button type="button" onclick="aaa()">0022</button> 
 
<button type="button" onclick="aaa()">0023</button> 
 
<button type="button" onclick="aaa()">0024</button> 
 
<button type="button" onclick="aaa()">0025</button> 
 
<button type="button" onclick="aaa()">0026</button> 
 
<button type="button" onclick="aaa()">0027</button>