グラデーション、グラデーションの背景、中央揃えのテキストを含むCSSシェイプのスタイルナビゲーションボタン

Question

イメージを使用せずにナビゲーションボタンを作成しようとしています。しかし、私はCSSを正しく動作させることはできません。私はテキストの垂直方向の整列以外はすべて得ることができましたが、それを達成するためには、コードが必要以上に邪魔になると感じています。ここで私が持っているものです。

.nav_button { 
 
    height: 18px; 
 
    background: linear-gradient(#3D3C3B 0%, #0A0B0A 50%); 
 
    margin-top: 5px; 
 
} 
 

 
.arrow_container { 
 
    display: inline-block; 
 
    width: 35px; 
 
} 
 

 
.nav_arrow { 
 
    width: 20px; 
 
    height: 18px; 
 
    background: linear-gradient(#D2DA76 0%, #5EB649 50%); 
 
} 
 

 
.nav_link { 
 
    display: inline-block; 
 
    width: 125px; 
 
    text-align: center; 
 
} 
 

 
.nav_arrow::after { 
 
    display: block; 
 
    content: ''; 
 
    height: 18px; 
 
    width: 20px; 
 
    background: linear-gradient(to bottom right, #D2DA76 0%, #5EB649 50%); 
 
    transform: translate(10px, 0px) scale(.8, .715) rotate(45deg); 
 
}

<a href='#'> 
 
    <div class='nav_button'><span class='arrow_container'><div class='nav_arrow'></div></span><span class='nav_link'>Test</span></div> 
 
</a>

はこれを書くための良い方法はありますか？そうでない場合は、少なくともテキストを縦に並べる方法を知る必要があります。ラインハイトが機能しませんでした。

編集：ここにデモ画像があります。矢印は後ろ向きですが近くにあります。

Answer 1

。

htmlの簡略化は、ボタンの背景である「」と「」を異なる色で独立してフェードするのではなく、ボタンで単一のグラデーションオーバーレイを使用するという考え方に基づいています。しかし、これは正確にと一致しません。

.nav_button_alt{ 
 
\t display:inline-block; 
 
\t border:1px solid #888; 
 
\t color:#FFF; 
 
\t text-decoration:none; 
 
\t font-family:Helvetica, Arial, sans-serif; 
 
\t position:relative; 
 
\t background:#5EB649; 
 
\t font-size:1.2em; 
 
\t line-height:1.4em; 
 
\t padding:0 0.2em 0 40px; 
 
\t min-width:125px; /* remove this if you wish the buttons to be relative to the size of the text*/ 
 
} 
 
.nav_button_alt > span{ 
 
\t display:inline-block; 
 
\t position:relative; 
 
\t width:100%; 
 
\t z-index:3; 
 
    text-align:center; 
 
} 
 
/* provides the fade */ 
 
.nav_button_alt:before{ 
 
\t content:""; 
 
\t position:absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t right:0; 
 
\t z-index:2; 
 
\t height:100%; 
 
\t background-image: linear-gradient(rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 50%); \t 
 
} 
 
/* provides the "black" overlay of the green background */ 
 
.nav_button_alt:after{ 
 
\t content:""; 
 
\t position:absolute; 
 
\t left:1.2em; /* distance from the right that the arrow starts */ 
 
\t top:0; 
 
\t height:0; 
 
\t right:0; 
 
\t border-left:1em solid transparent; /* size of the green arrow's point */ 
 
\t border-top:0.7em solid #000; /* half the height of the button */ 
 
\t border-bottom:0.7em solid #000; /* half the height of the button */ 
 
\t z-index: 1; 
 
}

<a href="#" class="nav_button_alt"> 
 
\t <span>Test</span> 
 
</a>

Answer 2

テキストの垂直方向の位置合わせのための使用 "行の高さ"。ここでは例

div { 
 
    height: 90px; 
 
    line-height: 90px; 
 
    text-align: center; 
 
    border: 2px dashed #f69c55; 
 
}

<div> 
 
    Hello World! 
 
</div>

Answer 3

は、ボタン内のテキストを揃える垂直方向にしてみます。よりよい解決策は、実際にかなりのサイズをハードコーディングしようとするよりも、テキストの行の高さのサイズにあなたのボタンの構造の相対を構築し、第二行の高さを更新するかもしれ

.nav_button { 
 
    height: 18px; 
 
    background: linear-gradient(#3D3C3B 0%, #0A0B0A 50%); 
 
    margin-top: 5px; 
 
} 
 

 
.arrow_container { 
 
    display: inline-block; 
 
    width: 35px; 
 
} 
 

 
.nav_arrow { 
 
    width: 20px; 
 
    height: 18px; 
 
    background: linear-gradient(#D2DA76 0%, #5EB649 50%); 
 
} 
 

 
.nav_link { 
 
    display: inline-block; 
 
    width: 125px; 
 
    text-align: center; 
 
    vertical-align:top; 
 
} 
 

 
.nav_arrow::after { 
 
    display: block; 
 
    content: ''; 
 
    height: 18px; 
 
    width: 20px; 
 
    background: linear-gradient(to bottom right, #D2DA76 0%, #5EB649 50%); 
 
    transform: translate(10px, 0px) scale(.8, .715) rotate(45deg); 
 
}

<a href='#'> 
 
    <div class='nav_button'><span class='arrow_container'><div class='nav_arrow'></div></span><span class='nav_link'>Test</span></div> 
 
</a>