Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                Artículo: <a href="https://iborra.es/blog/estilos-efectos-enlaces-texto/">https://iborra.es/blog/estilos-efectos-enlaces-texto/</a>

<div style="text-align:center;">
<!-- Enlace 1 Fade in background -->
<section class="link-fadeinbg enlacesmodernos">
<p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Fade in background</a> del artículo.</p>
</section>

<!-- Enlace 2 Slide up -->
<section class="link-slideup enlacesmodernos">
<p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Slide up</a> del artículo.</p>
</section>

<!-- Enlace 3 Slide right -->
<section class="link-slideright enlacesmodernos">
  <p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Slide right</a> del artículo.</p>
</section>

<!-- Enlace 4 Scale up -->
<section class="link-scaleup enlacesmodernos">
<p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Scale up</a> del artículo.</p>
</section>

<!-- Enlace 5 Scale up bounce -->
<section class="link-scaleupbounce enlacesmodernos">
<p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Scale up bounce</a> del artículo.</p>
</section>

<!-- Enlace 6 Scale down -->
<section class="link-scaledown enlacesmodernos">
<p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Scale down</a> del artículo.</p>
</section>

<!-- Enlace 7 Flip -->
<section class="link-flip enlacesmodernos">
<p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Flip</a> del artículo.</p>
</section>

<!-- Enlace 8 Border -->
<section class="link-border enlacesmodernos">
<p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Border</a> del artículo.</p>
</section>

<!-- Enlace 9 Skewed -->
<section class="link-skewed enlacesmodernos">
<p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Skewed</a> del artículo.</p>
</section>

<!-- Enlace 10 Text up line -->
<section class="link-textupline enlacesmodernos">
<p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Text up line</a> del artículo.</p>
</section>

<!-- Enlace 11 Arrow -->
<section class="link-arrow enlacesmodernos">
<p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Arrow</a> del artículo.</p>
</section>

<!-- Enlace 12 Curtain -->
<section class="link-curtain enlacesmodernos">
<p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Curtain</a> del artículo.</p>
</section>

<!-- Enlace 13 Braces -->
<section class="link-braces enlacesmodernos">
<p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Braces</a> del artículo.</p>
</section>

<!-- Enlace 14 Text fall -->
<section class="link-textfall enlacesmodernos">
<p>Este es un <a href="#" data-dummy="ejemplo">ejemplo</a> de enlace con el efecto <a href="#" data-dummy="Text fall">Text fall</a> del artículo.</p>
</section>

<!-- Enlace 15 SVG line -->
<div class="svg-wrap">
<svg viewBox="0 0 400 20">
<path id="svg_line" d="m 1.986,8.91 c 55.429038,4.081 111.58111,5.822 167.11781,2.867 22.70911,-1.208 45.39828,-0.601 68.126,-0.778 28.38173,-0.223 56.76079,-1.024 85.13721,-1.33 24.17379,-0.261 48.42731,0.571 72.58115,0.571"></path>
</svg>
</div>
<section class="link-svgline enlacesmodernos">
<p>Este es un <a href="#">ejemplo de enlace<svg class="link-svgline"><use xlink:href="#svg_line"></use></svg></a> con el <a href="#">efecto SVG line del artículo<svg class="link-svgline"><use xlink:href="#svg_line"></use></svg></a>.</p>
</section>

<!-- Enlace 16 SVG marker -->
<div class="svg-wrap">
<svg viewBox="0 0 400 60">
<path id="svg_marker" d="m 3.518915,27.827324 c 55.429038,4.081 111.581115,5.822 167.117815,2.867 22.70911,-1.208 45.39827,-0.601 68.126,-0.778 28.38172,-0.223 56.76078,-1.024 85.13721,-1.33 24.17378,-0.261 48.4273,0.571 72.58114,0.571"></path>
</svg>
</div>
<section class="link-svgmarker enlacesmodernos">
<p>Este es un <a href="#">ejemplo de enlace<svg class="link-svgline"><use xlink:href="#svg_marker"></use></svg></a> con el <a href="#">efecto SVG marker del artículo<svg class="link-svgline"><use xlink:href="#svg_marker"></use></svg></a>.</p>
</section>
</div>
              
            
!

CSS

              
                /********** Enlaces Modernos **********/

.enlacesmodernos {
	position: relative;
	z-index: 1; /* Necesario para establecer el pseudo-elemento z-index */
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.enlacesmodernos a {
	position: relative;
	display: inline-block;
	outline: none;
	color: #28262b;
	font-size: 19px;
	vertical-align: bottom;
	text-decoration: none;
	white-space: nowrap;
}

.enlacesmodernos p {
	font-family: 'Lato';
    font-size: 17px;
    color: #ccc;
    line-height: 30px;
}

.enlacesmodernos a::before,
.enlacesmodernos a::after {
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

.svg-wrap { /* Para los dos últimos efectos */
	position: absolute;
	width: 0px;
	height: 0px;
	overflow: hidden;
}

/* Fade in background */
.link-fadeinbg {
	background: transparent;
}

.link-fadeinbg a {
	border-bottom: 1px solid #c39f76;
	font-weight: 500;
	-webkit-transition: background-color 0.3s, border-color 0.3s;
	transition: background-color 0.3s, border-color 0.3s;
}

.link-fadeinbg a:hover,
.link-fadeinbg a:focus {
	border-color: #9f8465;
	background-color: #c39f76;
	color: #fff;
}

/* Slide up */
.link-slideup {
	background: transparent;
}

.link-slideup a {
	overflow: hidden;
	font-weight: 500;
}

.link-slideup a:hover {
	color: #fff;
}

.link-slideup a::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color: #c39f76;
	content: '';
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	-webkit-transform: translateY(95%);
	transform: translateY(95%);
}

.link-slideup a:hover::before,
.link-slideup a:focus::before {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

/* Slide right */
.link-slideright {
	background: transparent;
}

.link-slideright a {
	overflow: hidden;
	font-weight: 500;
}

.link-slideright a:hover {
	color: #fff;
}

.link-slideright a::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #c39f76;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: scaleY(0.618) translateX(-100%);
	transform: scaleY(0.618) translateX(-100%);
}

.link-slideright a:hover::before,
.link-slideright a:focus::before {
	-webkit-transform: scaleY(0.618) translateX(0);
	transform: scaleY(0.618) translateX(0);
}

/* Scale up */
.link-scaleup {
	background: transparent;
}

.link-scaleup a {
	color: #28262b;
	font-weight: 500;
}

.link-scaleup a:hover {
	color: #fff;
}

.link-scaleup a::before {
	position: absolute;
	top: 0;
	left: -5px;
	z-index: -1;
	box-sizing: content-box;
	padding: 0 5px;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background-color: #c39f76;
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	transition: transform 0.2s, opacity 0.2s;
	-webkit-transform: scale(0);
	transform: scale(0);
}

.link-scaleup a:hover::before,
.link-scaleup a:focus::before {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* Scale up bounce */
.link-scaleupbounce {
	background: transparent;
}

.link-scaleupbounce a {
	vertical-align: bottom;
	font-weight: 500;
	color: #28262b;
}

.link-scaleupbounce a:hover {
	color: #fff;
}

.link-scaleupbounce a::before {
	position: absolute;
	top: 0;
	left: -5px;
	z-index: -1;
	box-sizing: content-box;
	padding: 0 5px;
	width: 100%;
	height: 100%;
	background-color: #c39f76;
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	transition: transform 0.2s, opacity 0.2s;
	-webkit-transition-timing-function: cubic-bezier(0.25,0.25,0.325,1.39);
	transition-timing-function: cubic-bezier(0.25,0.25,0.325,1.39);
	-webkit-transform: scale(0);
	transform: scale(0);
}


.link-scaleupbounce a:hover::before,
.link-scaleupbounce a:focus::before {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* Scale down */
.link-scaledown {
	background: transparent;
}

.link-scaledown a {
	color: #28262b;
	font-weight: 500;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.link-scaledown a:hover,
.link-scaledown a:focus {
	color: #c39f76;
}

.link-scaledown a::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	background-color: rgba(195,159,118,1);
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.3s, background-color 0.2s;
	transition: transform 0.2s, opacity 0.2s, background-color 0.2s;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.link-scaledown a:hover::before,
.link-scaledown a:focus::before {
	background-color: rgba(255,255,255,0);
	opacity: 1;
	-webkit-transform: scaleX(1) scaleY(0.618);
	transform: scaleX(1) scaleY(0.618);
}

/* Flip */
.link-flip {
	background: transparent;
}

.link-flip a {
	font-weight: 500;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
	-webkit-perspective: 600px;
	perspective: 600px;
	-webkit-perspective-origin: 50% 100%;
	perspective-origin: 50% 100%;
}

.link-flip a:hover,
.link-flip a:focus {
	color: #fff;
}

.link-flip a::before,
.link-flip a::after {
	position: absolute;
	top: 0;
	left: -4px;
	z-index: -1;
	box-sizing: content-box;
	padding: 0 4px;
	width: 100%;
	height: 100%;
	content: '';
}

.link-flip a::before {
	background-color: #c39f76;
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-webkit-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

.link-flip a:hover::before,
.link-flip a:focus::before {
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

.link-flip a::after {
	border-bottom: 2px solid #c39f76;
}

/* Border */
.link-border a {
	color: #28262b;
	font-weight: 500;
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
}

.link-border a:hover {
	color: #28262b;
}

.link-border a:hover,
.link-border a:focus {
	-webkit-transform: scale(0.7333);
	transform: scale(0.7333);
}

.link-border a::before {
	position: absolute;
	top: -2px;
	left: -7px;
	box-sizing: content-box;
	padding: 0 5px;
	width: 100%;
	height: 100%;
	border: 2px solid #c39f76;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
	-webkit-transform: scale(0.8333);
	transform: scale(0.8333);
}

.link-border a:hover::before,
.link-border a:focus::before {
	opacity: 1;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

/* Skewed */
.link-skewed {
	background: transparent;
}

.link-skewed a {
	font-weight: 500;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
	color: #28262b;
}

.link-skewed a:hover,
.link-skewed a:focus {
	color: #fff;
}

.link-skewed a::before {
	position: absolute;
	top: 0px;
	left: -5px;
	z-index: -1;
	box-sizing: content-box;
	padding: 0 5px;
	width: 100%;
	height: 100%;
	background: #c39f76;
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	transition: transform 0.2s, opacity 0.2s;
	-webkit-transform: skewY(-7deg) skewX(-15deg);
	transform: skewY(-7deg) skewX(-15deg);
}

.link-skewed a:hover::before,
.link-skewed a:focus::before {
	opacity: 1;
	-webkit-transform: skewY(0) skewX(0);
	transform: skewY(0) skewX(0);
}

/* Text up line */
.link-textupline a {
	overflow: hidden;
	font-weight: 500;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.link-textupline p {
	line-height: 40px;
}

.link-textupline a:hover,
.link-textupline a:focus {
	-webkit-transform: translateY(10%);
	transform: translateY(10%);
	color: #28262b;
}

.link-textupline a::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #c39f76;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: translateY(100%) translateY(-5px);
	transform: translateY(100%) translateY(-5px);
}

.link-textupline a,
.link-textupline a::before {
	-webkit-transition-timing-function: cubic-bezier(0.6,0,0.4,1);
	transition-timing-function: cubic-bezier(0.6,0,0.4,1);
}

.link-textupline a:hover::before,
.link-textupline a:focus::before {
	-webkit-transform: translateY(-100%) translateY(5px);
	transform: translateY(-100%) translateY(5px);
}

/* Arrow */
.link-arrow {
	background: transparent;
}

.link-arrow a {
	padding: 0 0.25em;
	font-weight: 500;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.link-arrow a:hover,
.link-arrow a::after {
	-webkit-transform: translateX(-1em);
	transform: translateX(-1em);
	color: #fff;
}

.link-arrow a::before,
.link-arrow a::after {
	position: absolute;
	height: 100%;
	content: '';
}

.link-arrow a::before {
	left: 0;
	z-index: -1;
	width: 100%;
	background: #c39f76;
}

.link-arrow a::after {
	left: 100%;
	z-index: -2;
	width: 1em;
	background: #9f8465 url('http://iborra.es/web/wp-content/themes/ronneby_child/img/arrow_right.svg') no-repeat 50% 50%;
	background-size: 60% auto;
	text-align: center;
	font-family: Arial, sans-serif;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	pointer-events: auto;
}

.link-arrow a:hover::after,
.link-arrow a:focus::after {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

/* Curtain */
.link-curtain {
	background: transparent;
}

.link-curtain a {
	overflow: hidden;
	font-weight: 500;
	color: #28262b;
}

.link-curtain a:hover {
	color: #28262b;
}

.link-curtain a::before,
.link-curtain a::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 90%; /* Cambiar si no se ve el borde inferior */
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.link-curtain a::before {
	border-top: 2px solid #9f8465;
	background: transparent;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	-webkit-transform: translateY( calc(100% - 2px) );
	transform: translateY( calc(100% - 2px) );
}

.link-curtain a:hover::before,
.link-curtain a:focus::before {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.link-curtain a:hover::before,
.link-curtain a:focus::before,
.link-curtain a:hover::after,
.link-curtain a:focus::after {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.link-curtain a::after {
	z-index: -1;
	background: #c39f76;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}

.link-curtain a:hover::after,
.link-curtain a:focus::after {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

/* Braces */
.link-braces a {
	padding: 0 0.25em;
	font-weight: 500;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.link-braces a:hover {
	color: #c39f76;
}

.link-braces a::before,
.link-braces a::after {
	position: absolute;
	top: 0;
	font-weight: 100;
	font-size: 150%;
	line-height: 1;
	opacity: 0;
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
}

.link-braces a::before {
	left: -0.1em;
	content: '[';
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.link-braces a::after {
	right: -0.1em;
	content: ']';
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

.link-braces a:hover::before,
.link-braces a:hover::after {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

/* Text fall */
.link-textfall {
	background: transparent;
}

.link-textfall a {
	color: #28262b;
	font-weight: 400;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
	-webkit-perspective: 1000px;
	perspective: 1000px;
}

.link-textfall a:hover {
	color: #c39f76;
}

.link-textfall a::before,
.link-textfall a::after {
	position: absolute;
	top: 0;
	left: 0;
	content: attr(data-dummy);
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s, color 0.3s;
	transition: transform 0.3s, opacity 0.3s, color 0.3s;
	pointer-events: none;
}

.link-textfall a::before {
	color: #c39f76;
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
	-webkit-transform: translateY(-100%) translateZ(100px) rotateX(30deg) rotateZ(-10deg);
	transform: translateY(-100%) translateZ(100px) rotateX(30deg) rotateZ(-10deg);
}

.link-textfall a::after {
	color: #c39f76;
	-webkit-transform: translateY(-100%) translateZ(100px) rotateX(-30deg) rotateZ(10deg);
	transform: translateY(-100%) translateZ(100px) rotateX(-30deg) rotateZ(10deg);
}

.link-textfall a:hover::before,
.link-textfall a:hover::after {
	color: transparent;
	opacity: 1;
	-webkit-transform: translateY(0) translateZ(0) rotateX(0) rotateZ(0);
	transform: translateY(0) translateZ(0) rotateX(0) rotateZ(0);
}

.link-textfall a:hover::before {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.link-textfall a:hover::after {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

/* SVG line */
.link-svgline a {
	font-weight: 500;
}

.link-svgline a:hover {
	color: #28262b;
}

.link-svgline a svg.link-svgline { /* Cambiar estos valores para ajustar la línea */
	position: absolute;
	top: 130%;
	left: -2px;
	overflow: hidden;
	margin: 0;
	width: 100%;
	height: 20px; 
	-webkit-transition: stroke-dashoffset 0.3s ease-in-out; 
	transition: stroke-dashoffset 0.3s ease-in-out;
	-webkit-transform: translateY(-90%);
	transform: translateY(-90%);
	fill: none;
	stroke: #c39f76;
	stroke-width: 5;
	stroke-dasharray: 400px; 
	stroke-dashoffset: 400px;
}

@media screen and (max-width: 50em) { /* Cambiar estos valores para ajustar la línea para menos resolución de pantalla */
	.link-svgline a svg.link-svgline {
		-webkit-transform: translateY(-80%);
		transform: translateY(-80%);
	}
}

.link-svgline a:hover svg.link-svgline {
	stroke-dashoffset: 0px; 
}

/* SVG marker */
.link-svgmarker {
	background: transparent;
}

.link-svgmarker a {
	font-weight: 500;
}

.link-svgmarker a:hover {
	color: #28262b;
}

.link-svgmarker a svg.link-svgline { /* Cambiar estos valores para ajustar la línea */
	position: absolute;
	top: 140%;
	left: -2px;
	z-index: -1;
	overflow: hidden;
	margin: 0;
	width: 101%;
	height: 60px;
	opacity: 0.5; 
	-webkit-transition: stroke-dashoffset 0.3s ease-in-out; 
	transition: stroke-dashoffset 0.3s ease-in-out;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
	fill: none;
	stroke: #c39f76;
	stroke-width: 36;
	stroke-dasharray: 400px; 

	stroke-dashoffset: 400px;
}

@media screen and (max-width: 50em) { /* Cambiar estos valores para ajustar la línea para menos resolución de pantalla */
	.link-svgmarker a svg.link-svgline {
		-webkit-transform: translateY(-80%);
		transform: translateY(-80%);
	}
}

.link-svgmarker a:hover svg.link-svgline {
	stroke-dashoffset: 0px; 
}

/********** End Enlaces Modernos **********/
              
            
!

JS

              
                
              
            
!
999px

Console