<div>
<a href="#">Filtrele</a>
</div>
body {
background-color: #666;
display: flex;
align-items: center;
justify-content: center;
}
div {
position: fixed;
bottom: 0;
z-index: 1000;
display: flex;
width: 100%;
height: 30vh;
pointer-events: none;
background-image: linear-gradient(to bottom,rgba(255, 255, 255, 0),rgba(0, 0, 0, 0.9));
justify-content: center;
}
a {
pointer-events: all;
border-radius: 4px;
box-shadow: 0 0 0 0 rgba(255, 134, 37, 0.7);
width: 140px;
height: 40px;
background: #ff8625;
color: #fff;
display: block;
line-height: 40px;
text-align: center;
font-size: 16px;
margin-top: 30px;
text-decoration: none;
animation-name: pulse;
animation-duration: 1.25s;
animation-timing-function: ease-in;
animation-iteration-count: 3;
animation-delay: 2s;
}
@keyframes pulse {
100% {
box-shadow: 0 0 10px 35px rgba(255, 255, 255, 0);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.