CSS境界からの複数のグラデーショングロー

Question

こんにちは、thisのようなデザインをCSSで作ってみたいと思います。

私はhereと記載されている擬似要素で作成しようとしました。 私は毎回問題に遭遇します。グラデーションボックスは1つしかありません。影があります。 私もeliptic勾配の助けを借りて、熱烈なアウトラインを阻止しようとした:(

これにはいくつかのユニークなaproachがある場合、誰かが私のcode

.wrap{ 
    height: 20em; 
    width: 15em; 
    background: black; 
} 
.btn-t { 
    position: relative; 
    background: radial-gradient(ellipse at center, blue, blue); 
    box-shadow: inset 0 0 0 5px #7B9DFF; 
    color: $white-txt; 
    height: 4em; 
    line-height: 3.75em; 
    margin: 1em; 
    max-width: 10em; 
    padding: 0.25em 1em; 
    text-align: center; 
    font-size: 20px; 
    color: white; 
} 

.btn-t:after { 
    content: ''; 
    position: absolute; 
    width: 95%; 
    height: 20%; 
    top: 40%; 
    right: 0; 
    border-right: 5px solid red; 
    border-left: 5px solid red; 
} 


.btn-t:hover { 
    text-shadow: 0px 0px 10px white; 
    background: radial-gradient(ellipse at center, #71B1F5, blue); 
} 

感謝があり

？教えてもらえますあなた。

Answer 1

私は、近くに何かを再現しました。（テキストボタンの1つ、アイコンバージョンの1つ）：

アイコンバージョンはFontAwesomeがアイコン（したがって.fa参照）を生成するために使用されていると仮定：

/* text button */ 
.btn-glow { 
    border: 1px solid #354a40; 
    background-color: #1e2120; 
    padding: .5em .85em; 
    transition: all 0.025s linear; 
    color: #6c8678; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75); 
    font-size: .75em; 
    font-weight: bold; 
} 
.btn-glow:hover { 
    color: #e6fcf5; 
    text-shadow: 1px 1px 1em #66977b; 
    border-image: linear-gradient(90deg, #375345, #9afdcf, #375345) 10; 
    background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%); 
} 
.btn-glow:focus { 
    color: #79c6a1; 
    border-image: linear-gradient(90deg, #375345, #9afdcf, #375345) 10; 
    background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%); 
    outline: none; 
} 
.btn-glow:active { 
    color: #fff; 
    text-shadow: 1px 1px 2em #9ee6bf; 
    background-color: #406552; 
    border-image: linear-gradient(90deg, #375345, #9afdcf, #375345) 10; 
    background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 100%); 
} 

/* icon version */ 
.btn-glow-large { 
    border: 1px solid #354a40; 
    background-color: #1e2120; 
    padding: 1em; 
    transition: all 0.025s linear; 
} 
.btn-glow-large .fa { 
    color: #6c8678; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75); 
    transition: all 0.025s linear; 
} 
.btn-glow-large:hover { 
    border-image: linear-gradient(#375345, #9afdcf, #375345) 10; 
    background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%); 
} 
.btn-glow-large:hover .fa { 
    color: #e6fcf5; 
    text-shadow: 1px 1px 1em #66977b; 
} 
.btn-glow-large:focus { 
    border-image: linear-gradient(#375345, #9afdcf, #375345) 10; 
    background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%); 
    outline: none; 
} 
.btn-glow-large:focus .fa { 
    color: #79c6a1; 
} 
.btn-glow-large:active { 
    background-color: #406552; 
    border-image: linear-gradient(#375345, #9afdcf, #375345) 10; 
    background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 100%); 
} 
.btn-glow-large:active .fa { 
    color: #fff; 
    text-shadow: 1px 1px 2em #9ee6bf; 
} 

はhttps://codepen.io/ablewhite/pen/gWRQLN?editors=1100#0