HTML - attributes - href
revision: January 28, 2025
Content
"href" attribute : specifies the URL of a page a link goes to
top
If the href attribute is not present, the <a> tag will not be a hyperlink. href="#top" or href="#" can be used to link to the top of the current page!
syntax
top
<a href="URL"></a>
URL : the URL of the link. Possible values:
An absolute URL , which points to another web site. relative URL , which points to a file within a web site. link to an element with a specified "id" within the page. Other protocols (like https://, ftp://, mailto:, file:, etc..).script (like href="javascript:alert('Hello');")
some examples
top
codes:
<p class="spec">An image as a link:
<a href="https://www.lwitters-1.com">
<img border="0" alt="my website" src="../../cartoon.jpg" width="100" height="100">
</a>
</p>
<br>
<a href="javascript:alert('Hello World!');">execute JavaScript</a>
codes:
<a href="#top">Go to top of this page</a>
<br>
<p class="spec"><a href="mailto:[email protected] ">Send email</a></p>
href: link hover effects
top
code:
<div class="grid1">
<a class="effect-1" href="#">first link hover effect</a>
<a class="effect-2" href="#">second link hover effect</a>
</div>
<style>
.effect-1 {display: inline-block;padding: 1vw;}
.effect-1:before {left: 0; bottom: 0; width: 100%; height: 0.3vw; background: #e60023; transform: scaleX(0);}
.effect-1:hover:before {transform: scaleX(1);}
.effect-2 {display: inline-block; padding: 1vw; }
.effect-2:before, .effect-2:after {left: 0; top: 0; width: 100%; height: 100%; border-style: solid; border-color: #e60023; }
.effect-2:before {border-width: 0.3vw 0vw 0.3vw 0vw 0vw; transform: scaleX(0);}
.effect-2:after {border-width: 0vw 0.3vw 0vw 0.3vw 0vw; transform: scaleY(0);}
.effect-2:hover:before, .effect-2:hover:after {transform: scale(1, 1);}
</style>
code:
<div class="grid1">
<a class="effect-3" href="#">third link hover effect</a>
<a class="effect-4" href="#">fourth link hover effect</a>
</div>
<style>
.effect-3 {display: inline-block; padding: 1vw; padding-bottom: 0.5vw; overflow: hidden;}
.effect-3:before {left: 0; bottom: 0; width: 100%; height: 0.5vw; background: blue; transform: translateX(-100%);}
.effect-3:hover:before {transform: translateX(0);}
.effect-4 {padding: 1vw; display: inline-block; overflow: hidden;}
.effect-4:before, .effect-4:after {left: 0; width: 100%; height: 0.5vw; background: darkblue;}
.effect-4:before {bottom: 0; transform: translateX(-100%);}
.effect-4:after {top: 0;transform: translateX(100%);}
.effect-4:hover:before, .effect-4:hover:after {transform: translateX(0);}
</style>
code:
<div class="grid1">
<a class="effect-5" href="#"><span>fifth link hover effect</span></a>
<a class="effect-6" href="#"><span>sixth link hover effect</span></a>
</div>
<style>
.effect-5 {display: inline-block; overflow: hidden;}
.effect-5:before, .effect-5:after {right: 0vw; bottom: 0; background: darkblue;}
.effect-5:before {width: 100%; height: 0.4vw; transform: translateX(-100%);}
.effect-5:after {width: 0.4vw; height: 100%; transform: translateY(100%);}
.effect-5 > span {display: block; padding: 1vw;}
.effect-5 > span:before, .effect-5 > span:after {left: 0; top: 0; background: darkblue;}
.effect-5 > span:before {width: 100%; height: 0.4vw; transform: translateX(100%);}
.effect-5 > span:after {width: 0.4vw; height: 100%; transform: translateY(-100%);}
.effect-5:hover:before, .effect-5:hover:after, .effect-5:hover > span:before, .effect-5:hover > span:after { transform: translate(0, 0);}
.effect-6 {display: inline-block; overflow: hidden;}
.effect-6:before, .effect-6:after {right: 0; bottom: 0; background: red; transition: transform .3s ease;}
.effect-6:before {width: 100%; height: 0.4vw; transform: translateX(-100%); transition-delay: .9s;}
.effect-6:after { width: 0.4vw; height: 100%; transform: translateY(100%); transition-delay: .6s;}
.effect-6 > span {display: block; padding: 1vw;}
.effect-6 > span:before, .effect-6 > span:after {left: 0; top: 0; background: blue; transition: transform .3s ease;}
.effect-6 > span:before {width: 100%; height: 0.4vw; transform: translateX(100%); transition-delay: .3s;}
.effect-6 > span:after {width: 0.4vw; height: 100%; transform: translateY(-100%); transition-delay: 0s;}
.effect-6:hover:before, .effect-6:hover:after, .effect-6:hover > span:before, .effect-6:hover > span:after {transform: translate(0, 0);}
.effect-6:hover:before {transition-delay: 0s;}
.effect-6:hover:after {transition-delay: .3s;}
.effect-6:hover > span:before {transition-delay: .6s;}
.effect-6:hover > span:after {transition-delay: .9s;}
</style>
code:
<div class="grid1">
<a class="effect-7" href="#" data-content="seventh link hover effect"><span>seventh link hover effect</span></a>
<a class="effect-8" href="#" data-content="eight link hover effect"><span>eight link hover effect</span></a>
</div>
<style>
.effect-7 {display: inline-block; overflow: hidden;}
.effect-7:before {left: 0; top: 0; width: 100%; height: 100%; background: #e60023; transform: translateX(-100%);}
.effect-7:after { content: attr(data-content); left: 0; top: 0; width: 0; margin: 1.2vw; color: #e60023; white-space: nowrap; overflow: hidden; transition: width 0.5s ease;}
.effect-7 > span {display: block; margin: 0.2vw; padding: 1vw; background: #fbb016;}
.effect-7:hover:before {transform: translateX(0);}
.effect-7:hover:after {width: calc(100% - 2.4vw);}
.effect-8 {display: inline-block; overflow: hidden;}
.effect-8:before {left: 0; top: 0; width: 100%; height: 100%; background: #e60023; transform: translateY(-100%);}
.effect-8:after {content: attr(data-content);top: 0; left: 0; height: 0; margin: 1.2vw; color: #e60023; white-space: nowrap; overflow: hidden; transition: height .5s ease;}
.effect-8 > span {display: block; margin: 0.2vw; padding: 1vw; background: #fbb016;}
.effect-8:hover:before {transform: translateY(0);}
.effect88:hover:after {height: calc(100% - 2.4vw);}
</style>
