html - 更改弹出菜单按钮的颜色

标签 html css button

我是 css 的新手,所以我不知道如何更改弹出菜单两个按钮(提交和重置)的颜色。这两个都位于弹出菜单的末尾,但由于颜色原因无法阅读。我使用了来自 this 的代码网站和此处按钮的颜色是蓝绿色,但在我的代码中,按钮和文本颜色是白色,因此我无法阅读按钮。

我试过在 css 中更改背景颜色、文本颜色但没有任何效果

image

当前图片 Current image

我希望按钮是蓝色的

```
.gbtn{
  background: #d0d0d0;
  color: #444444;
  padding: 0 15px;
  text-transform: uppercase;
  height: 40px;
  line-height: 40px;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  font-size: 12px;
}
.gbtn.btn-estimate{
padding:0 22px;
margin-top:7px;
}
.gbtn.btn-discount{
padding:0 26px;
}
.gbtn:hover{
  background: #fbc443;
  color: #25BCE9;
}
.gbtn:hover span{
color: #25BCE9;
}
.gbtn span{
display: inline-block;
}
button{
/*   border:none;
  background: #25BCE9;
  color: #fff; 
  display: flex;
  justify-content: flex-start;*/
}

#contactForm { 
  display: none;
  z-index: 10000;
  border: 3px solid #25BCE9; 
  padding: 2em;
  width: 400px;
  text-align: center;
  background: #fff;
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%)
}

input{ 
  height: 40px;
  margin: .8em auto;
  font-family: inherit; 
  text-transform: inherit; 
  font-size: inherit;
  display: block; 
  width: 280px; 
  padding: .4em;
}
textarea { 
  height: 80px;
  width:337px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-family: inherit; 
  text-transform: inherit; 
  font-size: inherit;
  display: block; 
  padding: .4em;
  resize: none;}

.formBtn {
  display: inline-block;
  background: teal;
  color: #fff;
  width: 140px;
  font-weight: 100;
  font-size: 1.2em;
  padding: 5px 0;
  border: none;
}
<div class="block-currency">
<div class="gbtn btn-estimate">
	<div id="contact">Get Quote</div>
</div>
<div id="contactForm">
<h1>Keep in touch!</h1>
<small>We'll get back to you as quickly as possible</small>					  
<form action="#">
	<input placeholder="Name" type="text" required />
	<input placeholder="Email" type="email" required />
	<input placeholder="Subject" type="text" required />
	<textarea placeholder="Comment"></textarea>
	<input class="formBtn"  type="submit" />
	<input class="formBtn" type="reset" />
 </form>
 </div>
</div>

Block Currency Code

.block-currency{
position:relative;
float:right;
cursor:pointer;
line-height:50px;
height:50px; 
}
.block-currency:hover ul{
visibility:visible;
top:50px; 
opacity:1;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;

}

```

最佳答案

.gbtn{
  background: #d0d0d0;
  color: #444444;
  padding: 0 15px;
  text-transform: uppercase;
  height: 40px;
  line-height: 40px;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  font-size: 12px;
}
.gbtn.btn-estimate{
padding:0 22px;
margin-top:7px;
}
.gbtn.btn-discount{
padding:0 26px;
}
.gbtn:hover{
  background: #fbc443;
  color: #25BCE9;
}
.gbtn:hover span{
color: #25BCE9;
}
.gbtn span{
display: inline-block;
}
button{
/*   border:none;
  background: #25BCE9;
  color: #fff; 
  display: flex;
  justify-content: flex-start;*/
}

#contactForm { 
  z-index: 10000;
  border: 3px solid #25BCE9; 
  padding: 2em;
  width: 400px;
  text-align: center;
  background: #fff;
  position: relative;
  top:0%;
  left:0%;
}

input{ 
  height: 40px;
  margin: .8em auto;
  font-family: inherit; 
  text-transform: inherit; 
  font-size: inherit;
  display: block; 
  width: 280px; 
  padding: .4em;
}
textarea { 
  height: 80px;
  width:337px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-family: inherit; 
  text-transform: inherit; 
  font-size: inherit;
  display: block; 
  padding: .4em;
  resize: none;}

.formBtn {
  display: inline-block;
  background: teal;
  color: #fff;
  width: 140px;
  font-weight: 100;
  font-size: 1.2em;
  padding: 5px 0;
  border: none;
}
<div class="block-currency">
<div class="gbtn btn-estimate">
	<div id="contact">Get Quote</div>
</div>
<div id="contactForm">
<h1>Keep in touch!</h1>
<small>We'll get back to you as quickly as possible</small>					  
<form action="#">
	<input placeholder="Name" type="text" required />
	<input placeholder="Email" type="email" required />
	<input placeholder="Subject" type="text" required />
	<textarea placeholder="Comment"></textarea>
	<input class="formBtn"  type="submit" />
	<input class="formBtn" type="reset" />
 </form>
 </div>
</div>

关于html - 更改弹出菜单按钮的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55832433/

相关文章:

jquery - HTML5音频m4a

javascript - 如何在鼠标悬停时淡入不同的图像?

html - 从包装器内的 60% 宽度中排除 div

html - 为什么我的 Rails 应用程序上的 Bootstrap 导航栏是垂直的而不是水平的?

javascript - 禁用按钮 (F12)

html - 最小化浏览器时 div 重叠

php - 我想要使​​用 codeigniter 对每个帖子的所有评论

javascript - 如何使用 css 样式安全地加载电子邮件内容

Java GridBagLayout 对齐按钮

Android以编程方式更改按钮的文本颜色