：後にメイン区切りがオーバーラップしているときに、私は変形を使用します：スケール

Question

私はこのシャドウ効果を持っています：私はシャドウをメイン要素よりも小さくしたいと思っています。 問題は、transform：scaleプロパティを適用すると：afterが前方に来て、メインのものと重なることです。 HERESにコード：

button { 
 
\t font-size: 18px; 
 
\t font-weight: 300; 
 
\t background: inherit; 
 
\t min-width: 180px; 
 
\t max-height: 60px; 
 
\t border-radius: 30px; 
 
\t padding-top: 20px; 
 
    } 
 

 
    .btn-main { 
 
\t color:black!important; 
 
\t background: white; 
 
    } 
 

 
    .btn-main:hover { 
 
\t transform:scale(1.1) 
 
    } 
 

 

 
    .btn-main:after { 
 
\t content: ' '; 
 
\t opacity: .6; 
 
\t position: relative; 
 
\t top:-5px; 
 
\t background: black; 
 
\t width: 60%; 
 
\t border-radius: 20px; 
 
\t margin: 0 auto; 
 
\t display: block; 
 
\t z-index: -1; 
 
\t box-shadow: 0px 0px 15px 4px rgba(144,164,174,1), 0px 0px 4px  rgba(144,164,174,1), 0px 0px 50px 30px rgba(144,164,174,.3); 
 
    }

<button class="btn-main">I'm a button</button>

Answer 1

は今しばらくの間、これをしようとして、私が思い付くことができる最高の要素をラップし、影のため

.btn-wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-radius: 30px; 
 
} 
 

 
.btn-wrapper button { 
 
    position: relative; 
 
    font-size: 18px; 
 
    font-weight: 300; 
 
    background: white; 
 
    min-width: 180px; 
 
    max-height: 60px; 
 
    border-radius: 30px; 
 
    padding-top: 20px; 
 
} 
 

 
.btn-wrapper::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 80%; 
 
    width: 40%; 
 
    left: 30%; 
 
    height: 0; 
 
    box-shadow: 0px 0px 12px 4px rgba(144, 164, 174, 1), 0px 0px 4px rgba(144, 164, 174, 1), 0px 0px 35px 22px rgba(144, 164, 174, .3); 
 
} 
 

 
.btn-wrapper:hover .btn-main { 
 
    transform: scale(1.1) 
 
} 
 

 
.btn-wrapper:hover::before { 
 
    box-shadow: 0px 0px 12px 4px rgba(255,0,0, 1), 0px 0px 4px rgba(255,0,0, 1), 0px 0px 35px 22px rgba(255,0,0, .3); 
 
}

<div class="btn-wrapper"> 
 
    <button class="btn-main">I'm a button</button> 
 
</div>

をその擬似を使用することです