帶有漸變，漸變背景和居中文字的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>