겁나 빠른 웹 레시피

링크를 버튼으로 만들기

소개

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

사용기술

  • 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. jeisyoon
    2021.06.28 Link를 Bottom으로 만들기 - OK
  2. 늦은나이가아님
    2020.12.15 감사합니다
  3. 비닝
    항상 감사드립니다 ~
  4. 스티치
    두가지 a태그에 class값을 두개주는 방법(class="btn blue") 말고,
    두 a태그를 <div id=btn>으로 부모태그처럼 묶어서
    .btn 명령대신 #btn명령으로 바꾸면 될줄알았는데 버튼이 이상해졌습니다.
    왜 이런걸까요?ㅠㅠ
  5. 김신실
    왼쪽이랑 오른쪽 크기 차이랑 깊이 차이가 다른데 .. 저건 어떻게 맞추나요?
  6. 사탕나무
    발코딩을 했던 저로써는 이러한 테크닉들을 볼때마다 디자이너들과 개발자들의 미묘한 갈등? 에서의 자구책 생각이
    나는건 왜일까요 ㅋ
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기