Login With Github

CSS Links

In CSS, you can set different styles for links, and even creat various styles of link buttons. Here is an example:

.txtlink {
    color: green;
    text-decoration:none;
    margin-left:20px;
    font-size:16px;
}

.txtlink:hover {
    text-decoration:underline;
}

.button1 {
    display: inline-block;
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin-left:20px;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

.button2 {
    display:inline-block;
    background-color:#f44336;
    color: #FFFFFF;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    font-size:16px;
    margin-left:20px;
    opacity:0.8;
}

.button2:hover {
    color:white;
    background-color:red;
    opacity:1;
}

<a href="javascript:void(0)">Text Link</a>
<a href="javascript:void(0)" class="txtlink">Text Link</a>
<a href="javascript:void(0)" class="button1">Link Button</a>
<a href="javascript:void(0)" class="button2">Link Button</a>

There are many CSS properties for setting link styles, such as: color, font-family, background, etc.

There are four states of a link:

  • a:link - the style of a link which hasn't been visited
  • a:visited - the style of a link which has been visited
  • a:hover - the style of a link when is hovered over
  • a:active - the style of a link when clicked

Here is an example:

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

Note: When you are setting the style for different states of a link,  follow this rule: "a: hover" must be used after "a:link" and "a:visited",and "a:active" must be used after "a:hover".

Add Or Remove Underlines For Links

You can use the text-decoration property to add or remove underlines for links. Here is an example:

a:link {
    text-decoration:none;
}
a:visited {
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:active {
    text-decoration:underline;
}

Set Background Color For Links

You can use the background-color property to set the background color for links. Here is an example:

a:link {
    background-color:#B2FF99;
}
a:visited {
    background-color:#FFFF85;
}
a:hover {
    background-color:#FF704D;
}
a:active {
    background-color:#FF704D;
}

Link Buttons

You can implement a link button in conjunction with several other CSS properties. Here is an example:

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

You can also combine more CSS properties to create link buttons with different styles.

0 Comment

temp