AR-GE
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#ana{
width: 100%;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
.buton{
font-size: 22px;
color:#fff;
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
border:3px solid #fff;
text-decoration: none;
padding: 25px 45px;
font-family: "Arial",serif;
border-radius: 0px;
transition: all .1s linear;
position: relative;
z-index: 1;
overflow:hidden;
border-radius: 10px;
box-shadow: 2px 2px 2px 2px #333;
font-weight: bold;
transition: all .6s ease;
}
.katmanlar{
position: absolute;
background: #ffaf4b;
background: -moz-linear-gradient(top, #ffaf4b 0%, #ff920a 100%);
background: -webkit-linear-gradient(top, #ffaf4b 0%,#ff920a 100%);
background: linear-gradient(to bottom, #ffaf4b 0%,#ff920a 100%);
left:0;
top: 0;
z-index: -1;
transform:translateY(-100%);
transition: all .3s ease;
width: 25%;
height: 100%;
}
.katman1{
left:0;
transition-delay: 0s;
}
.katman2{
left:20%;
transition-delay: .1s;
}
.katman3{
left:40%;
transition-delay: .2s;
}
.katman4{
left:60%;
transition-delay: .3s;
}
.katman5{
left:80%;
transition-delay: .4s;
}
.buton:hover .katmanlar{
transform:translateY(0%);
}