In this Elementor Tutorial blog you will tech how to make Beautiful Button Designing and Hover in Elementor.

What is Elementor?

 Elementor is  a plugin by which you can create your own website without coding. This is a very wonderful plugin for which you can make your website very good and wonderful.

It is also available for free. It is available for free and it has many features in the free Version. This is the top plugin of WordPress that allows you to create many of your own websites with drag and drop and give you a very good looking website.

Buy Elementor Pro

Note:

Below CSS coding is only used in elementor. If you do not have a pro version of elementor first buy the plugin and then use this coding in Your website to make your Button beautiful as shown in the video.

CSS Code.

The full process: how to implement below CSS code? Shown in video below or in channel Tamoor Digital

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 CSS.

/*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);
}