Erzeugt eine Pseudo-Klasse in SCSS %pretty-button, über die man einem Button direkt ein Styling verpassen kann, bei dem er eine Umrandung hat und bei Mouseover oben rechts im Eck ein kleines Quadrat erscheint.

Button-Styling Vorlage (umrundet mit ::after-Element als Quadrat im Eck).css

/* Buttons */
%pretty-button {
	background-color: transparent;
	border-radius: 30px;
	border: 4px solid $highlight !important;
	color: $highlight;
	cursor: pointer;
	display: inline-block;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: .3em 1.5em !important;
	text-transform: uppercase;
	transition: all 300ms ease;
	&:hover {
		background-color: transparent;
		border: 4px solid $highlight;
		border-radius: 30px 0 30px 30px;
		color: $highlight;
		padding: .3em 1.7em .3em 1.3em !important;
			/*
			margin-left: .3em;
			opacity: 1;
		} */
	}
	&::after {
		background-color: $dark-green;
		border: 4px solid $white;
		content: "";
		display: inline-block;
		height: 4.5px;
		margin: 0;
		position: absolute;
		right: -8px;
		top: -8px;
		transition: opacity 300ms ease;
		visibility: visible;
		width: 4.5px;
		z-index: 99999999;
	}
	&:hover::after {
		opacity: 1;
		transition: all 300ms ease 200ms;
	}
	&.error-404-class-not-found::after {
		border-color: $light-grey;
	}
	&.amc-go-brrrr {
		border-color: $white !important;
		&::after {
			background-color: $white;
			border-color: #94B363;
		}
	}
}
#page-container .et_pb_button {
	@extend %pretty-button;
}