我有一个导航栏,但想向其中添加图像,因此导航栏不是文本链接,而是由具有悬停效果等的图像和文本组成的按钮组成。
但由于一些链接名称是动态的,我无法在 photoshop 中制作按钮,所以我想知道如何在 html 和 css 中制作这种类型的导航栏。
有什么想法吗?
编辑 为了澄清,我有以下图片 sample nav button
并希望在其下方添加文本以形成导航栏上的按钮(如果这样可以使导航栏更清晰的话)。
最佳答案
你可以用 CSS 做很多事
基本思想是使用伪类改变按钮每个状态的属性.cssclass:hover
将鼠标悬停在状态和 .cssclass:active
上鼠标向下。
正常
/* style of the button in normal state */
button.css3button{
padding: 0.5em;
background-color: lightblue;
border: 4px outset green;
color: green;
border-radius: 4px;
}
:悬停
/* properties that change when mouse over */
button.css3button:hover {
background-color: lightgreen;
}
:活跃
/* properties that change when mouse down */
button.css3button:active {
color: yellow;
border: 4px inset red;
}
现场演示:JSFIDDLE
使用 CSS3 的更复杂的样式示例:
<button type="button" name="" value="" class="css3button">submit</button>
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#bfc2ff 0%,
#82b4ff 25%,
#4664fa);
background: -webkit-gradient(
linear, left top, left bottom,
from(#bfc2ff),
color-stop(0.25, #82b4ff),
to(#4664fa));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
演示:JSFIDDLE
您当然可以更改每个状态的大小、颜色和渐变 :hover
:active
:visited
根据您自己的品味,您几乎可以设计任何风格 <a> <span> <div> <button>
关于html - 为导航栏的图像添加文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14716039/