It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 4 April 2021
To better specify the links in the texts of your website, it is better to use a special style for them. In the following code there are several special styles for the links used in HTML pages Some of these styles change the color of the text. Others draw an underline, and some of them change the background color of the text, each with a specific animation on mouse hover.
<!-- this script is provided by http://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
html {
font-size: 125%;
font-family: "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
font-weight: 300;
line-height: 1.6;
}
/* Link Style 1 */
.link1 a {
border-bottom: .05em solid #b4e7f8;
box-shadow: inset 0 -0.05em 0 #b4e7f8;
color: inherit;
transition: background-color .25s cubic-bezier(.33, .66, .66, 1);
text-decoration: none;
}
.link1 a:hover, .link1 a:focus, .link1 a:active {
background-color: #b4e7f8;
}
/* Link Style 2 */
.link2 a {
color: #111111;
border-bottom: .1em solid #e8e1d8;
transition: background-color .2s ease-in-out;
text-decoration: none;
}
.link2 a:hover {
background-color: #e8e1d8;
}
/* Link Style 3 */
.link3 a {
color: #343139;
text-decoration: none;
border-bottom: .125em solid #ff6407;
box-shadow: inset 0 -0.125em 0 #ff6407;
transition: box-shadow 270ms cubic-bezier(0.77, 0, 0.175, 1), color 270ms cubic-bezier(0.77, 0, 0.175, 1);
}
.link3 a:hover {
box-shadow: inset 0 -1.125em 0 #ff6407;
color: #000;
}
.link3 a:focus {
background: #fff;
outline: none;
background: #ff6407;
color: #fff;
box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.2);
}
/* Link Style 4 */
.link4 a {
padding-bottom: 1px;
text-decoration: none;
color: #000;
box-shadow: inset 0 -4px 0 rgba(13,190,152,0.7);
transition: background-color .25s ease-out;
}
.link4 a:hover {
background-color: rgba(13,190,152,0.7);
padding-top: 2px;
box-shadow: none;
}
/* Link Style 5 */
.link5 a {
color: black;
background-image: linear-gradient(to bottom, transparent 65%, #fcf113 0);
background-size: 0% 100%;
background-repeat: no-repeat;
text-decoration: none;
transition: background-size .4s ease;
}
.link5 a:hover {
background-size: 100% 100%;
cursor: pointer;
}
/* Link Style 6 */
.link6 a {
color: inherit;
text-decoration: none;
box-shadow: inset 0 -.1em 0 0 #ddd;
/*transition: box-shadow .2s cubic-bezier(0,0,.58,1);*/
/*transition: color .4s cubic-bezier(0,0,.58,1);*/
transition-property: box-shadow, color;
transition-duration: .2s, .4s;
trasition-timing-function: cubic-bezier(0,0,.58,1);
}
.link6 a:hover {
color: #888;
box-shadow: inset 0 -.25em 0 0 #ddd;
}
/* Link Style 7 */
.link7 a {
text-decoration: none;
color: inherit;
outline: none;
transition: background-color .25s ease-out;
display: inline-block;
padding: 0 1px;
border-bottom: 0.2em solid #ccc;
}
.link7 a:hover {
background-color: #ccc;
}
/* Link Style 8 */
.link8 a {
color: inherit;
text-decoration: none;
background-image: linear-gradient(to top, #ffa3ba 0, #ffa3ba .13169rem, rgba(255, 102, 140, 0) .13169rem, rgba(255, 102, 140, 0) 100%);
transition: 0.2s;
outline: none;
}
/* background-image: linear-gradient(to top, #ffa3ba 0, #ffa3ba .13169rem, rgba(255, 102, 140, 0) .13169rem, rgba(255, 102, 140, 0) 100%); */
.link8 a:hover {
color: #ff668c;
}
/* Link Style 9 */
.link9 a {
color: inherit;
text-decoration: none;
box-shadow: inset 0 -.125em 0 0 #ddd;
transition-property: color;
transition-duration: .25s;
trasition-timing-function: cubic-bezier(0,0,.58,1);
}
.link9 a:hover {
color: #ccc;
}
/* Link Style 10 */
.link10 a {
position: relative;
text-decoration: none;
color: gray;
transition: color .15s ease-in-out;
}
.link10 a:hover {
background-size: 100% 100%;
cursor: pointer;
}
.link10 a:after {
display: block;
content: "";
position: absolute;
right: 0;
left: 0;
width: 100%;
height: 3px;
opacity: 0;
transform: translateY(-150%);
transition: transform .15s ease-in-out, opacity .15s ease-in-out;
background-color: red;
}
.link10 a.is-active,
.link10 a:active,
.link10 a:focus,
.link10 a:hover {
color: red;
}
.link10 a.is-active:after,
.link10 a:active:after,
.link10 a:focus:after,
.link10 a:hover:after {
transform: translateY(0);
opacity: 1;
}
</style>
<p class="link1">This is an example of <a href="/">Linking Style 1</a></p>
<p class="link2">This is an example of <a href="/">Linking Style 2</a></p>
<p class="link3">This is an example of <a href="/">Linking Style 3</a></p>
<p class="link4">This is an example of <a href="/">Linking Style 4</a></p>
<p class="link5">This is an example of <a href="/">Linking Style 5</a></p>
<p class="link6">This is an example of <a href="/">Linking Style 6</a></p>
<p class="link7">This is an example of <a href="/">Linking Style 7</a></p>
<p class="link8">This is an example of <a href="/">Linking Style 8</a></p>
<p class="link9">This is an example of <a href="/">Linking Style 9</a></p>
<p class="link10">This is an example of <a href="/">Linking Style 10</a></p>
<a target='_blank' href='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!