.myLink {
	/* color: #FFF; */
	text-decoration: none;
	font-weight: none;

	position: relative;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 10px;
	outline: none;
	overflow: hidden;
	border-style: solid;
	border-color: rgba(22, 53, 128, 0.4);
	background-color: rgba(255, 253, 253, 0.3);
	border-radius: 4px 4px 4px 4px;
	transition: 0.2s;
}
.myLink span {
  position: relative;
  pointer-events: none;
}
.myLink::before {
  --size: 0;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, rgba(236, 242, 11, 0.7), transparent);
  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
		  
  /* transition: width 0.2s ease, height 0.2s ease; */
}

.myLink.myLink-XS:hover::before {
	--size: 50px;
}
.myLink.myLink-SM:hover::before {
	--size: 100px;
}
.myLink.myLink-MD:hover::before {
	--size: 200px;
}
.myLink.myLink-LG:hover::before {
	--size: 400px;
}
.myLink.myLink-XL:hover::before {
	--size: 800px;
}
.myLink.myLink-XXL:hover::before {
	--size: 1600px;
}

.myLink:hover {
	background-color: rgba(255, 253, 253, 0.3);
	border-radius: 4px 4px 4px 4px;

	/* 
		Trouver un moyen d'effectuer une transition
		But: Améliorer l'effet de profondeur 
	*/
	/* bottom: 2px;	 */
}
.myLink:hover::before {
	--size: 0px;
}

.myLink.myLink-primary::before {
	background: radial-gradient(circle closest-side, rgba(0, 140, 255, 0.4), transparent);
}
.myLink.myLink-primary:hover {
	background-color: rgba(0, 140, 255, 0.15);
}

.myLink.myLink-info::before {
	background: radial-gradient(circle closest-side, rgba(64, 192, 192, 0.4), transparent);
}
.myLink.myLink-info:hover {
	background-color: rgba(64, 192, 192, 0.15);
}

.myLink.myLink-success::before {
	background: radial-gradient(circle closest-side, rgba(0, 210, 0, 0.4), transparent);
}
.myLink.myLink-success:hover {
	background-color: rgba(0, 210, 0, 0.15);
}

.myLink.myLink-danger::before {
	background: radial-gradient(circle closest-side, rgba(255, 0, 0, 0.4), transparent);
}
.myLink.myLink-danger:hover {
	background-color: rgba(255, 0, 0, 0.15);
}

.myLink.myLink-warning::before {
	background: radial-gradient(circle closest-side, rgba(255, 192, 0, 0.4), transparent);
}
.myLink.myLink-warning:hover {
	background-color: rgba(255, 192, 0, 0.15);
}