آموزش افکت زیبای هاور دکمه در المنتور

				
					Gradient Button Effect | Elementor.ir

selector{
    --btn-width: 180px;
    --btn-height: 50px;
    --btn-background: #0e1538;
    --left-gradient: #F803F8;
    --right-gradient: #03F2FD;
}
selector a {
	position: relative;
	width: var(--btn-width);
	height: var(--btn-height);
}
selector a:before,
selector a:after {
	content: '';
	position: absolute;
	inset: 0;
	transition: 0.5s;
}
selector a:nth-child(1):before,
selector a:nth-child(1):after {
	background: linear-gradient(45deg,var(--left-gradient),var(--btn-background),var(--btn-background),var(--right-gradient));
}
selector a:hover:before {
	inset: -3px;
}
selector a:hover:after {
	inset: -3px;
	filter: blur(10px);
}
selector a span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--btn-background);
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

Button Shine Effect | Elementor.ir


/*Glass Shine Effect*/
selector a span::before {
	content: '';
	position: absolute;
	top: 0;
	left: -50%;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.075);
	transform: skew(160deg);
}