<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<title>검색 버튼</title>
<style>
.search-left{
width: 330px;
height: 50px;
border: 1px solid #19ce60;
float: left;
border-radius: 3px 0px 0px 3px;
position: relative;
}
.search-btn{
width: 52px;
height: 52px;
background-color: #19ce60;
border: none;
border-radius: 0px 3px 3px 0px;
cursor: pointer;
}
.search-left>input{
width: 240px;
height: 30px;
position: absolute;
top: 7px;
left: 10px;
border: none;
outline: none;
font-weight: 700;
}
.search-icon{
color: white;
font-size: 30px;
}
.keyboard-icon, .icon2{
position: absolute;
top: 25%;
}
.keyboard-icon{
left: 260px;
color: rgb(195, 195, 195);
}
.icon2{
left: 300px;
color: #19ce60;
}
</style>
</head>
<body>
<form action="">
<div class="search-box">
<div class="search-left">
<input type="text" name="search">
<!-- 키보드아이콘 -->
<a href="">
<span class="material-symbols-outlined keyboard-icon">
keyboard
</span>
</a>
<!-- 삼각형아이콘 -->
<span class="icon2">▼</span>
</div>
<button type="submit" class="search-btn">
<!-- 돋보기 아이콘 -->
<span class="material-symbols-outlined search-icon">
search
</span>
</button>
</div>
</form>
</body>
</html>
'HTML.CSS.JS > css' 카테고리의 다른 글
| [CSS] transform 속성: 회전, 이동, 확대 (0) | 2023.04.25 |
|---|---|
| [CSS] animation 애니메이션 효과 (0) | 2023.04.25 |
| [CSS] display : flex 속성 (0) | 2023.04.12 |
| [CSS] naver이동 버튼 (0) | 2023.04.06 |
| [CSS] cursor : pointer, 아이콘 사이트 (0) | 2023.04.06 |