Pulling my hair out with styling buttons

what do you think about that:

Using the Enfold Button Element with light-transparent but with other styling – just css
give the new class to the button (here it is glass green)
put in the field of custom css : glass green
for blue one : glass blue do not put in the classes with the dot (point) ! those are added by default
etc if you like

https://webers-testseite.de/buttons/

/* to get rid of enfold styling - use light-transparent  */
#top .avia-button.avia-color-light {
    color: inherit !important;
    border: none !important;
    -moz-border-radius: 0;
    -webkit-border-radius: 0; 
    border-radius: 0; 
    box-shadow: none !important
}

#top .avia-button.avia-color-light:hover {
opacity: 0.9 !important; 
text-shadow: 1px 1px 2px  #333
}

/* font-size of the button and the icon */
#top .avia-button.avia-color-light {
 font-size: 1.2rem 
}
.avia-button.avia-color-light .avia_button_icon {
    font-size: 1.5rem;
    vertical-align: bottom
}

/* new button style - a bit glassy  */
.glass {
	position: relative;
	display: inline-block;
	border-radius: 4px;
	box-shadow: 1px 1px 4px  #666;
	/* goes to style the text  */
	text-decoration: none;
	text-shadow: 1px 1px 2px  #333;
}
.glass:before{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
}

.glass:before{
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2))
}

/* the green one  */
.green {
	background-color: green; /*for compatibility with older browsers*/
	background-image: linear-gradient(green,lightgreen);
	color: #fff
}
.green:hover { background: linear-gradient(#073,#0fa) }

/* the blue one  */
.blue {
	background-color: blue; /*for compatibility with older browsers*/
	background-image: linear-gradient(blue,lightblue);
	color: #fff
}
.blue:hover { background: linear-gradient(#047,#0ef) }

/* the red one  */
.red {
	background-color: red; /*for compatibility with older browsers*/
	background-image: linear-gradient(#ea0404 ,#6d0019);
	color: #fff
}
.red:hover { background: linear-gradient(#a00,#e00) }

and now the rest is your turn – make some other classes with other gradients!

Here you can make your gradients: Link