구글덕후의 CSS 다양한 버튼만들기 #3

Published 2023. 3. 10. 09:30

클라이언트 또는 사용자에게 HTML 및 CSS에서 다양한 버튼을 보여주고 싶을때?
제공된 예제는 웹 페이지에서 사용할 수 있는 다양한 모양의 버튼과 이러한 모양을 만드는 데 사용되는 CSS 코드를 보여줍니다. 몇 가지 예로는 원형, 직사각형 및 삼각형 버튼이 있습니다. 다양한 모양의 버튼을 통합함으로써 웹 페이지는 사용자 경험을 향상시킬 수 있는 시각적으로 매력적인 디자인을 가질 수 있습니다.

<!DOCTYPE html>
<html>
<head>
	<title>Various Shape Buttons</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			background-color: #f1f1f1;
		}
		
		.btn {
			display: inline-block;
			padding: 10px 20px;
			border: none;
			border-radius: 25px;
			font-size: 16px;
			color: #fff;
			background-color: #009688;
			cursor: pointer;
			transition: background-color 0.3s ease;
			margin: 10px;
		}
		
		.btn:hover {
			background-color: #008080;
		}
		
		.btn-rounded {
			border-radius: 50%;
		}
		
		.btn-rounded:hover {
			background-color: #008080;
		}
		
		.btn-pill {
			border-radius: 50px;
		}
		
		.btn-pill:hover {
			background-color: #008080;
		}
		
		.btn-outline {
			background-color: transparent;
			color: #009688;
			border: 2px solid #009688;
		}
		
		.btn-outline:hover {
			background-color: #009688;
			color: #fff;
		}
		
		.btn-outline-rounded {
			border-radius: 50%;
			background-color: transparent;
			color: #009688;
			border: 2px solid #009688;
		}
		
		.btn-outline-rounded:hover {
			background-color: #009688;
			color: #fff;
		}
		
		.btn-gradient {
			background-color: #00bcd4;
			background-image: linear-gradient(to right, #00bcd4, #009688);
		}
		
		.btn-gradient:hover {
			background-color: #008080;
		}
		
		.btn-underline {
			background-color: transparent;
			color: #009688;
			text-decoration: underline;
		}
		
		.btn-underline:hover {
			background-color: #009688;
			color: #fff;
		}
		
		.btn-dashed {
			background-color: transparent;
			color: #009688;
			border: 2px dashed #009688;
		}
		
		.btn-dashed:hover {
			background-color: #009688;
			color: #fff;
			border: 2px solid #fff;
		}
		
		.btn-dotted {
			background-color: transparent;
			color: #009688;
			border: 2px dotted #009688;
		}
		
		.btn-dotted:hover {
			background-color: #009688;
			color: #fff;
			border: 2px solid #fff;
		}
	</style>
</head>
<body>
	<button class="btn">Default Button</button>
	<button class="btn btn-rounded">Rounded Button</button>
	<button class="btn btn-pill">Pill Button</button>
	<button class="btn btn-outline">Outlined Button</button>
	<button class="btn btn-outline-rounded">Outlined Rounded Button</button>
	<button class="btn btn-gradient">Gradient Button</button>
	<button class="btn btn-underline">Underlined Button</button>
	<button class="btn btn-dashed">Dashed Button</button>

버튼 코드 실제 출력물 :

Various Shape Buttons

다양한 버튼 형태

또 다른 코드 샘플:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Mobile-Optimized Landing Page</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			background-color: #f4f4f4;
		}
		.container {
			max-width: 600px;
			margin: 0 auto;
			padding: 20px;
		}
		.header {
			background-color: #fff;
			padding: 20px;
			text-align: center;
		}
		.header h1 {
			font-size: 24px;
			margin-bottom: 20px;
		}
		.section {
			padding: 20px;
			background-color: #fff;
			border-radius: 5px;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
			margin-top: 20px;
		}
		.section h2 {
			font-size: 20px;
			margin-bottom: 10px;
		}
		.section p {
			font-size: 16px;
			line-height: 1.5;
			margin-bottom: 20px;
		}
		.button {
			display: block;
			width: 100%;
			background-color: #008CBA;
			color: #fff;
			text-align: center;
			padding: 10px 0;
			border-radius: 5px;
			text-decoration: none;
			font-size: 16px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<div class="container">
		<header class="header">
			<h1>Mobile-Optimized Landing Page</h1>
		</header>
		<section class="section">
			<h2>About Us</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel mauris tincidunt, finibus felis vitae, bibendum nisl. Aliquam erat volutpat. Suspendisse potenti.</p>
			<a href="#" class="button">Learn More</a>
		</section>
		<section class="section">
			<h2>Our Services</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel mauris tincidunt, finibus felis vitae, bibendum nisl. Aliquam erat volutpat. Suspendisse potenti.</p>
			<a href="#" class="button">Learn More</a>
		</section>
		<section class="section">
			<h2>Contact Us</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel mauris tincidunt, finibus felis vitae, bibendum nisl. Aliquam erat volutpat. Suspendisse potenti.</p>
			<a href="#" class="button">Learn More</a>
		</section>
	</div>
</body>
</html>

2023.03.08 - [구글덕후의 CSS] - 구글덕후의 CSS 다양한 버튼 만들기 #1

2023.03.09 - [분류 전체보기] - 구글덕후의 CSS 다양한 버튼만들기 #2

'구글덕후의 CSS' 카테고리의 다른 글

구글덕후의 CSS 다양한 버튼만들기 #2 (0)	2023.03.09
구글덕후의 CSS 다양한 버튼 만들기 #1 (0)	2023.03.08

구글덕후의 CSS 다양한 버튼만들기 #3

'구글덕후의 CSS' 카테고리의 다른 글

티스토리툴바