DECOTEXS: Estilos para tus enlaces

lunes, 19 de septiembre de 2022

Estilos para tus enlaces

Estilo de flecha par tus enlaces. Modelo 1


<style>@media(max-width:767px) { a.arrowNext { width: calc(100% - 70px); } }

a.arrowNext:link {
color: white;
text-decoration: none;
}
a.arrowNext:visited {
color: white;
}
a.arrowNext:hover {
color: white;
}
a.arrowNext:active {
color: white;
}
.arrowNext {
display: inline-block;
position: relative;
padding: 11px;
width: 85%;
background: #0F9D58;
text-align: right;
margin-top: 1em;
margin-bottom: 1em;
font-family: PT Sans, sans-serif;
}
.arrowNext:after {
content: '';
display: block;
position: absolute;
left: 100%;
top: 50%;
margin-top: -25px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #0F9D58;
}</style>


<p><a class="arrowNext" href="#htm">Estilo de flecha par tus enlaces. Modelo 1</a></p>
 <!---  
  https://www.englishclub.com/reading/environment/pollution.htm --->