
a.animatedLink { position: relative; overflow: hidden; color: #0f54a1; display: inline; padding: 6px; } a.animatedLink:before { content: ""; position: absolute; top: 0px; left: 0; width: 1px; height: 1px; background: linear-gradient(135deg, #70b6f2 0%, rgba(15,84,161,0.21)); transform: translateX(-50%); transition: all 0.6s ease; transform-origin: 50% 50%; opacity: 0; } a.animatedLink:after { content: ""; position: absolute; bottom: 0px; right: 0; width: 1px; height: 1px; background: linear-gradient(135deg, rgba(15,84,161,0.21) 0%, #70b6f2); transform: translateX(50%);  transition: all 0.6s ease; transform-origin: 50% 50%;  opacity: 0; } a.animatedLink:hover:before, a.animatedLink:hover:after { transform: translateX(0%); width: 33%; height: 2px; opacity: 1; } @keyframes fullWidthAnimation { 0% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } a.animatedLink:active:before, a.animatedLink:active:after { transform: translateX(0%); width: 33%; height: 2px; opacity: 1; transition: all 0s ease; } .pulseEffect { display: inline-block; animation: pulseAnimation 1.5s infinite; } @keyframes pulseAnimation { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }