<a href="">
	<span>Ver documento</span>	
	<svg class="eye" width="128" height="128" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z"/></svg>
</a>


a {
	border: 2px solid #23252a;
	background-color: white;
	color: #23252a;
	text-decoration: none;
	display: flex;
	padding: 8px 20px;
	border-radius: 7px;
	align-items: center;
	box-shadow: 0 2px 15px rgba(0, 0, 0, .35);
	transition: all ease .3s;
}

a span {
	font-size: 16px;
	margin-right: 10px;
}

.eye {
	width: 30px;
	height: 30px;
	padding-bottom: 4px;
}

a:hover {
	background-color: aqua;
} 

a:hover .eye {
	animation-name: circleAnimation;
	animation-duration: .3s;
} 


@keyframes circleAnimation {
	0% {
		transform: scaleY(1);
	}
	
	50% {
		transform: scaleY(0);
	}
	
	100% {
		transform: scaleY(1);
	} 
}


body {
	display: flex;
	height: 100vh;
	align-items: center;
	justify-content: center;
	font-family: 'Inter', Arial;
} 
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.