使用带有渐变、渐变背景和居中文本的 css 形状的样式导航按钮答案

【问题标题】：Style nav button with css shap with gradient, gradient background, and centered text使用带有渐变、渐变背景和居中文本的 css 形状的样式导航按钮
【发布时间】：2017-03-18 14:20:55
【问题描述】：

所以我试图在不使用图像的情况下制作导航按钮。但我无法让 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>

有没有更好的方法来写这个？如果不是，我至少需要知道如何垂直对齐文本。 line-height 不起作用。

编辑：这是一张演示图片。箭头向后但很近。

【问题讨论】：

您能否提供一张最终结果的图片？
@haxxxton 好的。我加了一张照片。正如我所说，我唯一还没有解决的是文本的垂直对齐。虽然我觉得所有嵌套的 div 都是 html 中的跨度是一个草率的代码。
可以写得更简洁，但您正在寻找vertical-align:middle 或line-height: px。

标签： html css

【解决方案1】：

更好的解决方案可能是根据文本行高的大小实际构建按钮的结构，而不是尝试对大小进行硬编码，然后再更新行高。

html 的简化是基于我们在按钮上使用单个渐变叠加层而不是单独淡化按钮背景和“箭头”部分不同颜色的想法。然而，这并不完全符合设计。

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

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

【讨论】：

啊，如此接近。看起来不错，但我需要左侧的箭头和箭头后的文本中心。我用 php 之类的后端代码做得更好，前端设计不是我的强项。你能告诉我如何翻转箭头并使文本居中吗？谢谢！
@Zaper127，已更新。这是一个完全不同的世界:) 这里绝对没有判断力
太完美了。谢啦。我花一整天的时间只是为了到达我所在的地方。 CSS3 有很多很酷的新特性。希望我有使用它们的技能哈哈。
@Zaper127，不客气，请考虑将答案标记为解决方案。
抱歉，忘记了。

【解决方案2】：

尝试垂直对齐按钮内的文本。

.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>

【讨论】：

嗯。我试过vertical-align：middle;，从来没有想过top。成功了，谢谢。你能解释一下为什么 middle 不起作用，但 top 会在中间对齐吗？
默认情况下，它会将 .nav_link 的基线对齐到其父元素的基线。设置垂直对齐顶部将导致元素的顶部与行中最高元素的顶部对齐。
垂直对齐中间会导致元素在其父容器的中间对齐，导致它只从中间开始。你可以玩这个w3schools.com/cssref/…

【解决方案3】：

使用“行高”来垂直对齐文本。这是一个例子

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

<div>
  Hello World!
</div>

【讨论】：