Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags
more
Archives
Today
Total
관리 메뉴

개발자입니다

[생활코딩 CSS] 링크를 버튼으로 만들기 본문

HTML & CSS/생활코딩 - 겁나 빠른 웹 레시피

[생활코딩 CSS] 링크를 버튼으로 만들기

끈기JK 2023. 2. 4. 22:36

 

 

transform: translateY(3px) 로 눌리는 느낌 줬다.

border-bottom: 2px 로 변경해서 눌렀을 때 아래 그림자가 얇아지게 했다.

transition: all 0.1s 로 부드러운 움직임을 줬다.

<!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>

 

 

저작자표시

'HTML & CSS > 생활코딩 - 겁나 빠른 웹 레시피' 카테고리의 다른 글

[생활코딩 CSS] 리로딩 없이 URL 바꾸기 (음악앱)  (0) 2023.02.06
[생활코딩 CSS] 랜덤 이미지 생성기  (0) 2023.02.05
[생활코딩 CSS] Parallax(시차를 이용한 효과)  (0) 2023.02.04
[생활코딩 CSS] 자바스크립트 없이 tree 만들기  (0) 2023.02.04
[생활코딩 CSS] Masonry layout 만들기  (0) 2022.09.29
'HTML & CSS/생활코딩 - 겁나 빠른 웹 레시피' Related Articles more