Olá, tenho uma dúvida de CSS.
meu código é esse:
.enviar{
width: 40%;
padding: 15px 0;/* para cima e para baixo E para os lados*/
background-color: orange;
font-weight: bold;
color: white;
font-size: 18px;
border-radius: 5px;
border: none;
transition: 5s background;
cursor: pointer;
}
.enviar:hover{
background-image: linear-gradient(to bottom, orange,purple 150%);
}pq a minha transition não funciona? seria por causa do background-image?
Dessa forma amigo?
<div id="div"></div>
<button onclick="var div = document.getElementById('div');if(div.className =='on'){div.className='';}else{div.className='on'}">:hover em gradiente by: ED</button>html{
background:transparent;
}
div{
width:200px;
height:200px;
margin:50px auto 20px;
background:deeppink;
border-radius:5px;
box-shadow:0 200px 100px -100px white inset, 0 0 5px black;
transition:background 2s ease,box-shadow 2s ease;
}
div:hover,div.on{
background:green;
box-shadow:0 200px 100px -100px yellow inset, 0 0 5px black;
}
button{
display:block;
width:120px;
height:30px;
margin:auto;
border:none;
border:1px solid rgba(0,0,0,.5);
border-radius:2px;
color:white;
background:#333;
background:linear-gradient(#444,#202020);
box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 1px 0 rgba(255,255,255,.3);
}
button:hover,button:focus{
background:#444;
background:linear-gradient(#555,#202020);
}
button:active{
background:#111;
background:linear-gradient(#202020,#111);
box-shadow:0 1px 0 rgba(0,0,0,.3) inset,0 1px 0 rgba(255,255,255,.3);
}Depois fala se era isso mesmo. Espero ter ajudado. ** tmj**