겁나 빠른 웹 레시피

링크를 버튼으로 만들기

소개

여기서는 링크를 버튼으로 만드는 방법에 대해서 알아봅니다. 

사용기술

  • HTML
  • CSS

관련 지식

 

<!doctype html>
<html>
<head>
 <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
  <style>
    .btn{
      text-decoration: none;
      font-size:2rem;
      color:white;
      padding:10px 20px 10px 20px;
      margin:20px;
      display:inline-block;
      border-radius: 10px;
      transition:all 0.1s;
      text-shadow: 0px -2px rgba(0, 0, 0, 0.44);
      font-family: 'Lobster', cursive;
    }
    .btn:active{
      transform: translateY(3px);
    }
    .btn.blue{
      background-color: #1f75d9;
      border-bottom:5px solid #165195;
    }
    .btn.blue:active{
      border-bottom:2px solid #165195;
    }
    .btn.red{
      background-color: #ff521e;
      border-bottom:5px solid #c1370e;
    }
    .btn.red:active{
      border-bottom:2px solid #c1370e;
    }
  </style>
</head>
<body>
  <a class="btn blue" href="#blue">blue</a>
  <a class="btn red" href="#red">red</a>
</body>
</html>

 

댓글

댓글 본문
작성자
비밀번호
  1. 신기합니다. ^^
  2. 사탕나무
    발코딩을 했던 저로써는 이러한 테크닉들을 볼때마다 디자이너들과 개발자들의 미묘한 갈등? 에서의 자구책 생각이
    나는건 왜일까요 ㅋ
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기