.gloeiende-knop {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
text-align: center;
text-decoration: none;
color: #fff;
background: #6388F3;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.gloeiende-knop::before {
content: “”;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
opacity: 0;
transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out;
}
.gloeiende-knop:hover::before {
width: 200%;
height: 200%;
opacity: 1;
}
