How to design the a element with CSS?

Websites have links that, when clicked, open another page.

This link is created using the a element.

Some people may feel that the a element is difficult to handle because there are some designs that are set from the beginning, such as colors and underlines.

This time, for those who want to properly understand how to design the a element with CSS

I will explain according to the above items.

After reading this article, you will know how to design the a element using CSS .

How to design the a element with CSS?

The a element is described in the HTML document as follows.

<a href="#">詳細はこちらへ！</a>

In the “#” part, write the URL or path of the link destination. If nothing is set in CSS, the text will be blue and underlined .

If part of the text is a text link, basically this color and underline settings are done with CSS.

Let’s explain how to specify each.

change link color

Text links are blue by default.

Let’s use CSS to change the color of the text inside the element.

a {
  color: skyblue;
}

To change the color use the color property . This time, I changed to skyblue.

You can change the color freely, but it seems better to make the text links in the text blue.

If you make it a completely different color, it will not be recognized as a link and it will be more likely to pass by .

If you want to use a different color, leave the underline untouched so that it can be easily recognized as a link.

remove text underline

How to remove underline from text links.

a {
  text-decoration: none;
}

To remove the underline, use the text-decoration property . You can remove the underline by setting this to none.

You can also add an underline by specifying “text-decoration:underline”.

This text-decoration can also be used on other elements, but it can be confusing and is not recommended.

Basically, let’s use it to erase the underline of the a element.

Remove image borders (for older browsers)

In old browsers, if you insert an image with the img element inside the a element, a border may appear around the image.

It will not be displayed in newer browsers, but just in case, it is better to set it to be deleted.

a img{
  border: none;
}

specify a pseudo-class

The a element is often set using a pseudo class , such as changing the color when the mouse is hovered .

Let’s explain the pseudo-class used in the a element.

Commonly used pseudo-classes

The following four pseudo-classes are used for the a element.

The most commonly used ones are :visited and :hover.

a{
  color: blue;
  text-decoration: none;
}
a:visited{
  color: green;
}
a:hover{
  color: skyblue;
  text-decoration: underline;
}

In the code above, the text link is blue at first, and changes to light blue and is underlined when the mouse is over it.

After clicking once, the text link will be green because it has been visited.

About the order of writing pseudo-classes

Pseudo-classes should be specified in the order :link, :visited, :hover, :active.

If you change the order, the specification may not be overwritten well, so it may not be displayed as expected .

How to make a basic button link

So far, we’ve talked about text links.

You often see links in the form of buttons. Let’s create a simple button .

<a href="#">ここをクリック</a>

a{
  padding: 7px 13px;
  background: green;
  text-decoration: none;
  color: white;
  font-weight: bold;
  border-radius: 15px;
  transition: 0.3s;
}
a:hover{
  background: skyblue;
}

I made the background color of the button green and the text white.

border-radius is for rounded corners. In addition, I use blank spaces to create the shape of the button.

transition is a property that sets CSS animations.

In the above, it takes 0.3 seconds to change. I think that you can see how it switches softly instead of switching in an instant.

Please try various things, such as changing the shape of the button and how it changes when you hover the mouse.

Summary: The a element is the basic of basics

This time, we have explained everything from the basic method of designing the a element using CSS to how to create a button link.

We also introduced how to use pseudo-classes to change the style depending on the state.

The a element is essential knowledge for studying HTML/CSS, so let’s master it early.

I hope that this article will help you in your studies.