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

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>

d3bc18f8bef993aa478b35f093a30d3a_1488035637_2841.png

|
댓글을 작성하시려면 로그인이 필요합니다. 로그인

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 8년 전 조회 1,596
CSS 8년 전 조회 2,249
CSS 8년 전 조회 1,764
CSS 8년 전 조회 2,193
CSS 8년 전 조회 2,253
CSS 8년 전 조회 2,239
CSS 8년 전 조회 2,051
CSS 8년 전 조회 1,790
CSS 8년 전 조회 2,291
CSS 8년 전 조회 1,610
CSS 8년 전 조회 1,691
CSS 8년 전 조회 1,826
CSS 8년 전 조회 2,415
CSS 8년 전 조회 2,481
CSS 8년 전 조회 1,856
CSS 8년 전 조회 2,322
CSS 8년 전 조회 1,878
CSS 8년 전 조회 1,919
CSS 8년 전 조회 1,857
CSS 8년 전 조회 1,536
CSS 8년 전 조회 1,590
CSS 8년 전 조회 3,151
CSS 8년 전 조회 2,147
CSS 8년 전 조회 1,744
CSS 8년 전 조회 2,167
CSS 8년 전 조회 2,204
CSS 8년 전 조회 2,413
CSS 8년 전 조회 1,692
CSS 8년 전 조회 2,544
CSS 8년 전 조회 1,845
🐛 버그신고