用CSS改变圆角按钮的颜色 [英] changing color of rounded corners button with CSS
本文介绍了用CSS改变圆角按钮的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
提前感谢一堆！
我可以使用CSS做一个圆角按钮。我喜欢能够鼠标悬停按钮，整个事情改变其颜色，而不只是最内部的div。 plz帮助！
我的假设是iam应该有一些javascript的onmouseover =，正确吗？
以下网页： http://biozenconsulting.com/new/
（同样，当我在IE8和Chrome浏览器中查看时，如何摆脱出现在右边角落的小框？）
是HTML代码：
< div class =nav_menuonclick =location.href ='index.htm' >
< b class =top_menu>< b class =top_menu1>< b>< / b>< / b>< b class =top_menu2> b>< / b>< / b>< b class =top_menu3>< / b>< b class =top_menu4> >< / b>< / b>
< div class =top_menufg>
<！ - content goes here - >
首页
< / div>
< b class =top_menu>< b class =top_menu5>< / b>< b class =top_menu4>< / b>< b class = top_menu3>< / b>< b class =top_menu2>< b>< / b>< / b>< b class =top_menu1>< b& b>< / b>< / b>
< / div>
这里是CSS：
.nav_menu {
text-align：center;
color：＃353535;
font-size：20pt;
font-family：Verdana，Geneva，sans-serif;
float：left;
width：33％;
}
#about {
margin：0.5％0 .5％;
}
<！ - 对于圆角框 - >
.top_menu {
display：block
overflow：hidden;
}
.top_menu * {
display：block;
height：1px;
overflow：hidden;
font-size：.01em;
background：#AAAAAA
}
.top_menu1 {
margin-left：3px;
margin-right：3px;
padding-left：1px;
padding-right：1px;
border-left：1px solid #AAAAAA;
border-right：1px solid #AAAAAA;
background：#AAAAAA
}
.top_menu2 {
margin-left：1px;
margin-right：1px;
padding-right：1px;
padding-left：1px;
border-left：1px solid #AAAAAA;
border-right：1px solid #AAAAAA;
background：#AAAAAA
}
.top_menu3 {
margin-left：1px;
margin-right：1px;
border-left：1px solid #AAAAAA;
border-right：1px solid #AAAAAA;
}
.top_menu4 {
border-left：1px solid #AAAAAA;
border-right：1px solid #AAAAAA
}
.top_menu5 {
border-left：1px solid #AAAAAA;
border-right：1px solid #AAAAAA
}
.top_menufg {
background：#AAAAAA
}
.top_menufg：hover {
background-color：＃888888;
cursor：pointer;
}
<！ - 对于圆角框 - >
解决方案
我用一个链接替换了外部div，
< a class = nav_menuhref =index.htm>
< b class =top_menu>< b class =top_menu1>< b>< / b>< / b>< b class =top_menu2> b>< / b>< / b>< b class =top_menu3>< / b>< b class =top_menu4> >< / b>< / b>
< div class =top_menufg>
<！ - content goes here - >
首页
< / div>
< b class =top_menu>< b class =top_menu5>< / b>< b class =top_menu4>< / b>< b class = top_menu3>< / b>< b class =top_menu2>< b>< / b>< / b>< b class =top_menu1>< b& b>< / b>< / b>
< / a>
CSS
.nav_menu {
text-align：center;
color：＃353535;
font-size：20pt;
font-family：Verdana，Geneva，sans-serif;
float：left;
width：33％;
text-decoration：none;
}
/ *对于圆角框* /
.top_menu {
display：block
overflow：hidden;
}
.top_menu * {
display：block;
height：1px;
overflow：hidden;
font-size：.01em;
background：#AAAAAA
}
.top_menu1 {
margin-left：3px;
margin-right：3px;
padding-left：1px;
padding-right：1px;
border-left：1px solid #AAAAAA;
border-right：1px solid #AAAAAA;
background：#AAAAAA
}
.top_menu2 {
margin-left：1px;
margin-right：1px;
padding-right：1px;
padding-left：1px;
border-left：1px solid #AAAAAA;
border-right：1px solid #AAAAAA;
background：#AAAAAA
}
.top_menu3 {
margin-left：1px;
margin-right：1px;
border-left：1px solid #AAAAAA;
border-right：1px solid #AAAAAA;
}
.top_menu4 {
border-left：1px solid #AAAAAA;
border-right：1px solid #AAAAAA
}
.top_menu5 {
border-left：1px solid #AAAAAA
border-right：1px solid #AAAAAA
}
.top_menufg {
background：#AAAAAA
}
a.nav_menu：hover b，a。 nav_menu：hover div {
background-color：＃888888;
cursor：pointer;
}
/ *对于圆角框* /
thanks a bunch in advance!
i was able to make a rounded corner button using CSS. i like to be able to mouseover the button, and the entire thing changes its color, not just the inner most div. plz help!
my assumption is that iam supposed to have some kinda javascript with onmouseover="", correct?
here's the page: http://biozenconsulting.com/new/
(also, how do i get rid of the small boxes that appear on the right corners when viewed in IE8 and Chrome?)
this is the HTML code:
<div class="nav_menu" onclick="location.href='index.htm'">
<b class="top_menu"><b class="top_menu1"><b></b></b><b class="top_menu2"><b></b></b><b class="top_menu3"></b><b class="top_menu4"></b><b class="top_menu5"></b></b>
<div class="top_menufg">
<!-- content goes here -->
Home
</div>
<b class="top_menu"><b class="top_menu5"></b><b class="top_menu4"></b><b class="top_menu3"></b><b class="top_menu2"><b></b></b><b class="top_menu1"><b></b></b></b>
</div>
and here's the CSS:
.nav_menu {
text-align: center;
color: #353535;
font-size: 20pt;
font-family: Verdana, Geneva, sans-serif;
float: left;
width: 33%;
}
#about {
margin: 0 .5% 0 .5%;
}
<!-- For rounded boxes -->
.top_menu {
display:block
overflow: hidden;
}
.top_menu *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#AAAAAA
}
.top_menu1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
background:#AAAAAA
}
.top_menu2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
background:#AAAAAA
}
.top_menu3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
}
.top_menu4{
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA
}
.top_menu5{
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA
}
.top_menufg{
background:#AAAAAA
}
.top_menufg:hover{
background-color: #888888;
cursor: pointer;
}
<!-- For rounded boxes -->
解决方案
I replaced the outer div with a link and added a little bit of CSS.
HTML
<a class="nav_menu" href="index.htm">
<b class="top_menu"><b class="top_menu1"><b></b></b><b class="top_menu2"><b></b></b><b class="top_menu3"></b><b class="top_menu4"></b><b class="top_menu5"></b></b>
<div class="top_menufg">
<!-- content goes here -->
Home
</div>
<b class="top_menu"><b class="top_menu5"></b><b class="top_menu4"></b><b class="top_menu3"></b><b class="top_menu2"><b></b></b><b class="top_menu1"><b></b></b></b>
</a>
CSS
.nav_menu {
text-align: center;
color: #353535;
font-size: 20pt;
font-family: Verdana, Geneva, sans-serif;
float: left;
width: 33%;
text-decoration: none;
}
/* For rounded boxes */
.top_menu {
display:block
overflow: hidden;
}
.top_menu * {
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#AAAAAA
}
.top_menu1 {
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
background:#AAAAAA
}
.top_menu2 {
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
background:#AAAAAA
}
.top_menu3 {
margin-left:1px;
margin-right:1px;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
}
.top_menu4 {
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA
}
.top_menu5 {
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA
}
.top_menufg {
background:#AAAAAA
}
a.nav_menu:hover b, a.nav_menu:hover div {
background-color: #888888;
cursor: pointer;
}
/* For rounded boxes */
这篇关于用CSS改变圆角按钮的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
