links

here are some cool ways to style links!!

intro

Links are the "<a>" tags that allow you to link to other pages.

by default, most browsers show links as blue, and underlined.

The basic link, without any CSS styling:

Click here to go to neocities!

HTML

<a href="https://neocities.org">Click here to go to neocities!</a>

now below are some ways to make your HTML links ("<a>" tags) look different using CSS styling!

underlines

usually, people like to remove the underlines:

removing the underline:

Click here to go to neocities!

CSS

a {
    text-decoration: none;
}

you can use the "border" CSS to give some other types of outlines.

Click here to go to neocities!

CSS

a {
    color: red;
    text-decoration: none;
    border-bottom: 1px solid cyan;
}

Click here to go to neocities!

CSS

a {
    color: red;
    text-decoration: none;
    border-bottom: 3px double red;
}

Click here to go to neocities!

CSS

a {
    color: magenta;
    text-decoration: none;
    border-bottom: 1px dashed magenta;
}

Click here to go to neocities!

CSS

a {
    color: blue;
    text-decoration: none;
    border-bottom: 1px dotted blue;
}

hovering

we can specify what the links should look like when the mouse cursor hovers over our links.

keep this in mind when looking through these link styles since you can always mix and match!

Hover me yipee!

CSS

a {
    color: blue;
    text-decoration: none;
    border-bottom: 1px dotted blue;
}

a:hover {
    text-transform: uppercase;
}

Hover me yipee!

CSS

a {
    color: blue;
    text-decoration: none;
}

a:hover {
    transform: scale(1, -1);
    display: inline-block;
}

buttony menus

using the same "<a>" tags, we can style them to be some blocky links, suitable for menus!

HTML

<div class="my-menu">
    <a href="">home</a>
    <a href="">blog</a>
    <a href="">gallery</a>
    <a href="">about</a>
</div>

CSS

.my-menu a {
    display: block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    text-align: center;
    background: blue;
    color: white;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 13px;
}

.my-menu a:hover {
    background: #0000d7;
}

the below used "::before" which is an advanced CSS rule - it allows us to kind of create a ghost-element. In this case I created a second lighter rectangle, to give the illusion of a glossy button!

HTML

<div class="my-menu">
    <a href=""><div class="menu-text">home</div></a>
    <a href=""><div class="menu-text">blog</div></a>
    <a href=""><div class="menu-text">gallery</div></a>
    <a href=""><div class="menu-text">about</div></a>
</div>

CSS

.my-menu a {
    display: block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    text-align: center;
    background: blue;
    color: white;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 15px;
    position: relative;
    z-index: 1;
    border-radius: 6px;
}

.my-menu a::before {
    display: block;
    position: absolute;
    height: 20px;
    width: 100%;
    background: #2e6cff;
    content: " ";
    z-index: 1;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;

}

.my-menu a:hover {
    background: #0000d7;
}

.my-menu a:hover::before {
    background: blue;
}

.menu-text {
    position: relative;
    z-index: 2;
}

below we use "border" for the left-side and bottom-side in a creative way with "hover" to make it look like a 3D button press!

HTML

<div class="my-menu">
    <a href="">home</a>
    <a href="">blog</a>
    <a href="">gallery</a>
    <a href="">about</a>
</div>

CSS

.my-menu a {
    background: #ff0060;
    padding: 8px;
    font-size: 18px;
    font-weight: bold;
    text-transform: lowercase;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    margin-bottom: 6px;
    border-bottom: 4px solid #ac0089;
    border-left: 4px solid #ac0089;
    box-sizing: border-box;
    height: 40px;
    width: 200px;
    display: block;
}

.my-menu a:hover {
    height: 36px;
    width: 196px;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    position: relative;
    top: 4px;
    margin-bottom: 10px;
}

HTML

<div class="my-menu">
    <a href="">home</a>
    <a href="">blog</a>
    <a href="">gallery</a>
    <a href="">about</a>
</div>

CSS

.my-menu a {
    background: orange;
    font-weight: bold;
    border-radius: 2px;
    border: 2px solid black;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    margin-bottom: 6px;
    box-sizing: border-box;
    height: 30px;
    line-height: 26px;
    width: 200px;
    display: block;
    position: relative;
}

.my-menu a::before {
    display: block;
    height: 100%;
    width: 28px;
    background: yellow;
    position: absolute;
    content: " ";
}

.my-menu a:hover {
    background: #ff8f00;

}

HTML

<div class="my-menu">
    <a href=""><div class="bloop">·</div><div class="menu-text">home</div></a>
    <a href=""><div class="bloop">·</div><div class="menu-text">blog</div></a>
    <a href=""><div class="bloop">·</div><div class="menu-text">gallery</div></a>
    <a href=""><div class="bloop">·</div><div class="menu-text">about</div></a>
</div>

CSS

.my-menu a {
    background: #000;
    color: lime;
    font-family: monospace;
    display: block;
    height: 30px;
    line-height: 30px;
    width: 150px;
    text-decoration: none;
    font-size: 16px;
}

.my-menu .bloop {
    font-size: 36px;
    line-height: 30px;
    display: inline-block;
    color: red;
    text-shadow: 1px 1px 3px red;
}

.my-menu a:hover .bloop {
    color: lime;
    text-shadow: 1px 1px 3px lime;
}

.my-menu a:hover .menu-text {
    color: #9eff9e;
}

.my-menu .menu-text {
    display: inline-block;
    vertical-align: top;
    text-shadow: 1px 1px 3px lime;
}

HTML

<div class="my-menu">
    <a href="">home</a>
    <a href="">blog</a>
    <a href="">gallery</a>
    <a href="">about</a>
</div>

CSS

.my-menu a {
    height: 24px;
    line-height: 24px;
    width: 120px;
    display: block;
    background: magenta;
    border-radius: 12px;
    margin-bottom: 4px;
    color: white;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 1px purple;
}

.my-menu a:hover {
    background: #ff49ff;
}

HTML

<div class="my-menu">
    <a href=""><div class="heart">♥</div>home</a>
    <a href=""><div class="heart">♥</div>blog</a>
    <a href=""><div class="heart">♥</div>gallery</a>
    <a href=""><div class="heart">♥</div>about</a>
</div>

CSS

.my-menu a {
    height: 24px;
    line-height: 24px;
    width: 120px;
    display: block;
    margin-bottom: 4px;
    color: #ff7b92;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 18px;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    text-decoration: none;
    text-shadow: 1px 1px 1px #ffd2da;
}

.my-menu .heart {
    display: inline-block;
    margin-right: 6px;
    color: pink;
}


.my-menu a:hover .heart {
    color: #ff7b92;
}

horizontal buttons

to make the menus horizontal, replace the "display: block" with "display: inline-block"

Back 2 cool styles