-
CSS 직사각형 버튼 만들기간단코딩 2023. 10. 5. 17:44
버튼을 웹페이지에 삽입할경우 기본 버튼의 스타일은 회색버튼에 검정글씨로 되어진 투박한 모습입니다.
CSS를 추가하여 버튼의 외모를 예쁘게 바꿀 수 있는데요?
버튼의 모양이나 색상 그리고 Hover 효과라든지 그림자효과등 아주 다양한 효과들을 적용할수가 있습니다.
오늘은 이 CSS 코드를 적용하여 직사각형의 버튼을 한번 만들어볼께요
기본 적용코드입니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>직사각형 CSS버튼</title> <style> .css-button { display: inline-block; padding: 10px 20px; font-size: 16px; font-weight: bold; text-align: center; text-transform: uppercase; background-color: #007BFF; color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } /* 호버 효과 */ .css-button:hover { background-color: #0056b3; } </style> </head> <body> <button class="css-button">CSS 버튼만들기</button> </body> </html>위 HTML을 저장하여 웹페이지로 확인을 하게되면 아래와 같은 BLUE 계열의 직사각버튼을 확인할 수 있습니다
font-size: 16px;또한 font-size 를 조절하면 위에 보이는 글씨크기보다 크거나 작게 조절할 수가 있게되구요
background-color: #007BFF;background-color 값을 수정하면 버튼의 색상을 다른색으로 변경할수가 있습니다.
포토샵이나 기타 이미지편집 프로그램안에서 색상을 클해보면 해당색상의 값을 확인하실 수가 있을거에요~포토샵의 경우에는 아래와 같이 확인하실 수 있게됩니다.
.css-button:hover { background-color: #0056b3; }그리고 버튼위에 마우스포인트가 오버했을때 색상을 약간 다르게 보여주는 hover 효과의 색상도 변경이 가능합니다.
또한 마우스로 클릭했을때도 효과를 줄수가 있습니다.
/* 클릭 효과 */ .css-button:active { background-color: #000000; /* 클릭할 때 변경될 배경색 */ }CSS 뒷부분에 위의 코드를 추가하게되면 마우스오버시 색상이 변경되고 만약 클릭을 했다면 배경색이 클릭하는순간 #000000 즉 검정색으로 변경될것입니다.
순간적이겠지만 클릭했을때 색상이 변경되니 눌렀다는느낌이 드네요~
마지막으로 버튼을 클릭했을때 새창으로 다른 웹페이지이동을 해보겠습니다.
<a href="https://go.ajamall.kr/" target="_blank"><button class="css-button">CSS 버튼만들기</button></a>버튼을 클릭했을떄 링크를 추가하는 방법은 여러가지가 있을수 있는데요?
저는 개인적으로 이 방법을 많이 사용하고 있습니다.
이런 방법도 있습니다 참고하세요 ^^
<a class="css-button" href="https://go.ajamall.kr" target="_blank">CSS 버튼만들기</a> <button class="css-button" onclick="window.open('https://go.ajamall.kr/');">CSS 버튼만들기</button>지금까지 추가해본 코드를 모두 종합해보면 아래와 같이 정리해볼 수 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>직사각형 CSS버튼</title> <style> .css-button { display: inline-block; padding: 10px 20px; font-size: 16px; font-weight: bold; text-align: center; text-transform: uppercase; background-color: #007BFF; color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } /* 호버 효과 */ .css-button:hover { background-color: #0056b3; } /* 클릭 효과 */ .css-button:active { background-color: #000000; /* 클릭할 때 변경될 배경색 */ } </style> </head> <body> <a href="" target="_blank"><button class="css-button">CSS 버튼만들기</button></a> <a class="css-button" href="https://go.ajamall.kr" target="_blank">CSS 버튼만들기</a> <button class="css-button" onclick="window.open('https://go.ajamall.kr/');">CSS 버튼만들기</button> </body> </html>이상 직사각형 CSS를 추가하여 직사각형 버튼을 만들어보았습니다 ^^
반응형'간단코딩' 카테고리의 다른 글
그누보드 smarteditor2 스마트에디터2 폰트크기 변경 (0) 2023.07.15 그누보드 유튜브 영상 크기 PC와 모바일 반응형 크기조절 (0) 2023.07.05 그누보드 글보기 하단 글목록을 보이게 하려면? (0) 2023.07.04 티스토리 스킨변경 후 검색버튼이 먹통 (0) 2023.06.12 PHP GET방식 POST방식 값 전달받기 (0) 2023.06.12