Web_Dev_Grad

In order to provide a good user experience, links should follow clear and consistent conventions across the website. So however you decide to style your links, keep the same type of links looking the same.

They should be easily distinguishable from regular text, often through colour, underlining, or other visual cues such as the cursor becoming a pointer when hovered over.

By default, anchor tags are underlined and blue which may not match our website theme. As such, one of the first CSS rules I include is:

a {
	text-decoration: none;
	color: inherit;
	outline: none;
}

This removes the underline by setting text-decoration to none, makes it the same colour as the parent element by setting color to inherit and removes any outline when it is focussed by setting outline to none. This makes the links now indistinguishable from other text on your website but lets us define them as we use them depending on their purpose without having to change these rules over and over. For example a link in a navigation bar might be different colours or font than an external link in a paragraph.

Links can be customised depending on their state. These can be seen when using links on the web. Have you ever clicked a blue link, only to go back to the page and see it is now purple? This is because there is a rule for the :visited link state to highlight to the user that the link has already been clicked. These states are pseudo classes and the selectors for them follow the syntax of:

#linkID:visited {}

I feel that the bare minimum effect for a 3D button would be to remove the shadow of a button when pressed, move the button down 5px to make it appear pressed when pressed, and make the cursor a pointer when hovered.

button {
    padding: 15px;
    border: 1px solid black;
    border-radius: 5px;
    text-decoration: none;
    box-shadow: 0px 5px;
}

button:hover {
    cursor:pointer
}

button:active {
    margin-top: 5px;
    color: black;
    box-shadow: 0px 0px;
}

One new property here is the box-shadow, which takes two values; the x-offset and y-offset to create a shadow around the box to create a 3-dimensional effect.