CSS 직사각형 버튼 만들기
버튼을 웹페이지에 삽입할경우 기본 버튼의 스타일은 회색버튼에 검정글씨로 되어진 투박한 모습입니다.
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를 추가하여 직사각형 버튼을 만들어보았습니다 ^^