更改弹出菜单按钮的颜色 [英] Change the color of pop up menu's button

问题描述

我是CSS的新手，所以我不知道更改弹出菜单两个按钮(提交和重置)颜色的方法.两者都位于弹出菜单的末尾，但由于颜色而无法读取.我已经从此网站使用了此代码，此处按钮的颜色为深绿色但是在我的代码中，按钮和文本颜色为白色，因此我无法读取按钮.

I am new to css so I cannot figure out the way of changing the color of pop up menus two buttons (Submit and Reset). Both of these are placed at the end of the pop up menu, but are not readable because of the color. I have used this code from this site and here the color of button is teal but in my code the button and text color is white and because of this I am unable to read the buttons.

我尝试更改CSS中的背景颜色，文本颜色，但没有任何作用

I have tried changing the background color, text color in css but nothing is working

图像

当前图像当前图像

我希望按钮为蓝色

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

这篇关于更改弹出菜单按钮的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！