<!DOCTYPE html>
<html>
<head>
<style>
.btn {
padding: 15px 25px;
background: #2196F3;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn::after {
content: '';
position: absolute;
width: 0;
height: 100%;
top: 0;
left: 0;
background: rgba(255,255,255,0.3);
transition: width 0.3s;
}
.btn:hover::after {
width: 100%;
}
</style>
</head>
<body>
<button class="btn">Hover Me</button>
</body>
</html>
Explanation:
- Button has a shining effect using
::after. - Expands across button on hover.
Leave a Reply