css Advanced - Link Buttons  고급 - 링크 버튼

이 예제는 몇 가지 CSS 속성을 결합하여 링크를 상자 / 버튼으로 표시하는 고급 예제를 보여줍니다.

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;

}

<!DOCTYPE html>

<html>

<head>

<style>

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;

}

</style>

</head>

<body>

<a href="default.asp" target="_blank">This is a link</a>

</body>

</html>