-
[ 코딩 ] css 버튼 클릭시 눌리는 효과 만들기 (완전 쉬움)코딩의 즐거움/CSS 2020. 12. 28. 12:00
[ 코딩 ] css 버튼 클릭시 눌리는 효과 만들기 (완전 쉬움)
위 움짤 이미지처럼 클릭시 들어갔다 나왔다 하는 느낌으로
버튼을 만들어보려고 한다.
우선 전체 코드를 작성해보자.
위 코드를 작성하고 저장한 후 웹페이지를 열면
버튼이 움짤처럼 작동될 것이다.
작동이 안된다면 코드에 오타가 있는지 확인해 보자.
작성코드가 길어질 것 같아서 div#btn 태그 안에 글자는 적지 않았다.
우선 <body> 태그 안에 div 태그를 넣어줬고,
<style>태그 안에 css 코드를 작성해서 div 태그를 디자인해줬다.
자 그럼 style 태그에 아이디선택자인 #btn에 적어 넣은 코드들을 살표보겠다.
아래 이미지를 확인하면서 읽어보면 이해가 더 쉽게 된다.
float : left;
아래쪽에 margin-top이 적용이 안되서
플롯왼쪽으로 고정시켜줬다.
width: 100px; height: 50px;
너비를 100픽셀 높이 50픽셀을 줬다.
background-color: #ccc;
배경색으로 회색을 줬다.
border-radius : 20px;
모서리 네군대를 둥글게 만들어지도록 하기 위해 넣었다.box-shadow : 3px 3px 3px black;
오른쪽 3픽셀, 아래쪽 3픽셀 번짐효과3픽셀 검정색 그림자가 들어가도록 속성을 줬다.
transition-duration: 0.3s;
버튼모양을 클릭했을 때 동적으로 0.3초동안 동적으로 구현되도록
만들어주는 코드이다.
이걸 안넣으면 버튼을 눌렀을 때 딱딱 끊겨서 구현된다.
#btn:active{ }
이 :active 가 바로 클릭했을 때
안에있는 코드들이 적용되도록 해주는 선택자이다.
아이디선택자 바로 뒤에 콜론(:)을 적고 바로 뒤에 active를 적어줘야 된다.
이제 #btn:active 안에 있는 코드들을 살펴보자.
margin-left: 5px;
테두리 바깥쪽 여백을 5픽셀을 줘서 클릭했을 때 왼쪽으로 5픽셀만큼 이동하도록 해준다.
margin-top : 5px;
테두리 바깥쪽 여백을 5픽셀만큼 줘서 눌렀을 때 아래쪽으로 5픽셀만큼 이동하도록 구현된다.
box-shadow : none;
버튼모양의 #btn을 클릭했을 때 그림자효과가 사라지도록 none 속성을 줬다.
여기에 a 태그로 링크를 걸어주면 다른페이지로 연결이 가능하다.
'코딩의 즐거움 > CSS' 카테고리의 다른 글
[ 코딩 ] css float으로 왼쪽 오른쪽 정렬하기 (0) 2021.01.04 [ 코딩 ] css font 속성 알아보기 (0) 2021.01.01 [ 코딩 ] css 글자에 그림자 적용하기 : text-shadow (2) 2020.12.25 [ 코딩 ] css 그림자 속성 box-shadow (0) 2020.12.21 [ 코딩 ] css border-radius 테두리 둥굴게 (0) 2020.12.18