CSSのボタンのスケーリング効果を作成する方法は？

Question

私はボタンを作成しようとしました。そのボタンはクリックされたときに拡大/縮小されます。私は試してみましたができませんでした。私はこの効果がCSSを介してのみ可能だと思う。だから助けてください。 は、GIFのように、このボタンを作成するために私を助けてください：

のように：そのような

#button::after:active{ 
    transform: scale(2); 
} 

か何か！

Answer 1

:before疑似要素を使用すると、ボタンの下に別の矩形を作成し、transformをクリックしてクリックして拡大縮小することができます。 CSS :activeの代わりにclickイベントを使用することができます。要素をクリックすると、他の要素をクリックしてアクティブ状態を解除し、クリック時に再び効果を見る必要があります。不透明度が0になる前に：素晴らしいですが、なぜとき青のアウトラインが表示されていることを行い

button { 
 
    padding: 10px 25px; 
 
    background: red; 
 
    color: white; 
 
    margin: 50px; 
 
    border: none; 
 
    position: relative; 
 
    outline: none; 
 
} 
 
button:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: black; 
 
    z-index: -1; 
 
} 
 
button:focus:before { 
 
    transform: scale(2); 
 
    transition: all 0.4s linear; 
 
    opacity: 0; 
 
}

<button>Click</button>

Answer 2

なぜあなたはそれを必要としますか？

.button { 
 
    margin: 2em; 
 
} 
 

 
.button:hover { 
 
    transform: scale(2); 
 
}

<button class="button">Button</button>

Answer 3

応じ

<button class="scale-btn">Text</button> 

CSS

.scale-btn{ 
    padding:6px 12px; 
    border:none; 
    background-color: #212121; 
    color:#fff; 
    font-size:20px; 
    position: relative; 
    opacity: 1; 
} 
.scale-btn::after{ 
    content:""; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin:auto; 
    transform:scale(1); 
    background-color: rgba(0,0,0,0.8); 
    opacity:1; 
    transition:all ease 0.5s; 
    z-index:-1; 
} 
.scale-btn:hover::after{ 
    animation:grow 0.5s ease; 
} 

@keyframes grow 
{ 
    0%{ 
    transform:scale(1); 
    opacity:1; 
    } 
    100%{ 
    transform:scale(1.2); 
    opacity:0; 
    } 
} 

スタイル

この

HTMLを試してみてくださいLink for reference