我有一个按钮,里面有一个加载动画,当我悬停它时,我想作为一个整体来显示渐变效果。
我设法做到了,但如果你移动光标在加载效果和文本上,你会注意到这两者之间的划分。
请看下面显示我的问题的片段:
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>
最佳答案
在输入元素#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>