javascript - CSS Submit Button with Loading Animation 有悬停效果划分

Question

我有一个带有加载动画的按钮，当我悬停它时，我想整体显示一个渐变效果。

我设法做到了，但是如果您将光标移到加载效果和文本上，您会注意到这两者之间的区别。

请看下面显示我的问题的片段:

document.getElementById("search").onclick = function() {
  var hiddeninputs = document.getElementById("loading");
  hiddeninputs.style.display = "inline-flex";
  $("#loading").delay(1500).fadeOut();
}

.hidden {
  display: none;
}

#loading {
  width: 10px;
  height: 10px;
  border: 5px solid #ccc;
  border-top-color: #004E98;
  border-radius: 100%;
  animation: round 2s linear infinite;
}

@keyframes round {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

.btn-search {
  width: 20%;
  display: inline-block;
  text-align: center;
  margin: 10px;
  height: 12%;
  margin-top: 25px;
  box-sizing: border-box;
  border: 2px solid #00386d;
  border-radius: 5px;
  ext-align: center;
  background-color: #004E98;
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  box-shadow: 0px 5px 20px rgba(25, 25, 25, .3);
}

#button-search:hover {
  cursor: pointer;
  background: #004E98;
  background-image: -webkit-linear-gradient(top, #004E98, #3498db);
  background-image: -moz-linear-gradient(top, #004E98, #3498db);
  background-image: -ms-linear-gradient(top, #004E98, #3498db);
  background-image: -o-linear-gradient(top, #004E98, #3498db);
  background-image: linear-gradient(to bottom, #004E98, #3498db);
}

#button-search:active {
  background-color: #003465;
  transform: translateY(1px);
}

#search {
  display: inline-block;
  text-align: center;
  padding: 10px;
  padding-left: 25px;
  padding-right: 25px;
  background-repeat: no-repeat;
  background-position: center;
  border: hidden;
  background-color: #004E98;
  color: #fff;
}

#search:hover {
  cursor: pointer;
  background: #004E98;
  background-image: -webkit-linear-gradient(top, #004E98, #3498db);
  background-image: -moz-linear-gradient(top, #004E98, #3498db);
  background-image: -ms-linear-gradient(top, #004E98, #3498db);
  background-image: -o-linear-gradient(top, #004E98, #3498db);
  background-image: linear-gradient(to bottom, #004E98, #3498db);
}

#search:active {
  background-color: #003465;
  transform: translateY(1px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn-search" id="button-search">
  <input type="submit" id="search" value="Buscar" onclick="showHide()">
  <div id="loading" class="hidden"></div>
</div>

Answer 1

您在输入元素 #search 上有另一个背景，它在 div .btn-search 的背景之上创建了另一个背景。我让它们变得透明，并删除了 :active 和 :focus 上输入周围出现的轮廓。

	document.getElementById("search").onclick = function() {
		var hiddeninputs = document.getElementById("loading");
		hiddeninputs.style.display="inline-flex";
		$("#loading").delay(1500).fadeOut();
	}

	.hidden{
		display: none;
	}
	#loading{
		width: 10px;
		height: 10px;
		border: 5px solid #ccc;
		border-top-color: #004E98;
		border-radius: 100%;
		animation: round 2s linear infinite;
	}
	@keyframes round{
		from{transform: rotate(0deg)}
		to{transform:rotate(360deg)}
	}
	.btn-search{
	width:20%;
	display:inline-block;
	text-align: center;
	margin:10px;
	 height: 12%;
	margin-top:25px;
	box-sizing: border-box;
	border: 2px solid #00386d;
	border-radius: 5px;
	ext-align: center;
	background-color: #004E98;
	color: #fff;
	text-decoration: none;
	font-size: 17px;
	box-shadow: 0px 5px 20px rgba(25,25,25,.3);
}
#button-search:hover{
  cursor: pointer;
    background: #004E98;
  background-image: -webkit-linear-gradient(top, #004E98, #3498db);
  background-image: -moz-linear-gradient(top, #004E98, #3498db);
  background-image: -ms-linear-gradient(top, #004E98, #3498db);
  background-image: -o-linear-gradient(top, #004E98, #3498db);
  background-image: linear-gradient(to bottom, #004E98, #3498db);
}
#button-search:active{
background-color: #003465;
  transform: translateY(1px);
}
#search{
 display: inline-block;
 text-align: center;
  padding:10px;
  padding-left:25px;
  padding-right:25px;
  background-repeat: no-repeat;
  background-position: center;
  border: hidden;
  background-color: transparent;
  color: #fff;
}

#search:hover{
  cursor: pointer;
    background: transparent;
}

#search:active{
  background-color: transparent;
  transform: translateY(1px);
}

#search:focus {
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-search" id="button-search">
  <input type="submit" id="search" value="Buscar" onclick="showHide()">
  <div id="loading" class="hidden"></div>
</div>