如何样式表单提交按钮在CSS中？

我有一个网站，顶部的菜单看起来不错。如果您将鼠标悬停在菜单上方，它会突出显示，它不是JavScript，而是HTML 1严格（它一定是这个）。

我是从这样一个做了：

<form action="masterpage.cgi" method="post"> 
<input type="hidden" name="test" value="hoi"> 
<input type="submit" value="opgave2" /> 
</form>

这个完美的作品，但它看起来丑陋。我想使用我的顶级导航链接（或者我希望它是看起来相同的按钮）作为提交按钮。我怎样才能做到这一点？

菜单链接：

<li><a href="../Nieuws/Nieuws.html">Nieuws </a></li>

当前CSS：

ul.topNav { 
    margin:0px; 
    padding:0px; 
    width:960px; 
} 
.topNav li{ 
    float:left; 
    display:inline-block; 
}

来源

2013-11-28 user3046636

做https://www.google.ge/?gws_rd=cr&ei=rpuYUp2-DYaJ5ATQqYCQCQ#q=buttons+in+css –

你想有点研究你的链接看起来像按钮或按钮应该看起来像链接？也许这[网站]（http://webdesignerwall.com/tutorials/css3-gradient-buttons）可以给你一个想法如何设计你的按钮，同样可以用于链接，只是让他们'显示：内联块;'。 – martinstoeckli

如果你想在你的提交按钮的样式更多的控制，使用该按钮标记为这样：

HTML

<form action="masterpage.cgi" method="post"> 
    <input type="hidden" name="test" value="hoi"> 
    <button type="submit" name="submit">opgave2</button> 
</form>

C SS - 在这种情况下，我已将它设计成链接形式。（不是最好的主意，只是一个例子）

ul.topNav { 
    margin:0; 
    padding:0; 
    width:960px 
} 
.topNav li { 
    float:left; 
    display:inline-block 
} 
button { 
    background:none; 
    border:none; 
    color:#00C; 
    font-size:24px 
} 
button:hover { 
    text-decoration:underline; 
    cursor:pointer 
}

来源

2013-12-02 01:49:30 misterManSam

如何样式表单提交按钮在CSS中？

回答

相关问题