<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
background-color:black;
text-align: center;
}
nav{
position: absolute;
width:100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box{
text-decoration: none;
color : #FFB6C1;
background: transparent;
padding: 20px 30px;
border-radius: 10px;
font-weight: bold;
text-transform: uppercase;
transition: all 0.1s ease-in-out;
border: 2px solid #FFB6C1;
margin: 0 10px ;
}
.box:hover{
border:0;
box-shadow: 0 0 4px #32F1FF, 0 0 6px #32F1FF, 0 0 15px #32F1FF;
}
</style>
<body>
<nav>
<a href="#" class="box">menu1 </a>
<a href="#" class="box">menu2 </a>
<a href="#" class="box">menu3 </a>
<a href="#" class="box">menu4 </a>
<a href="#" class="box">menu5 </a>
</nav>
</body>
</html>
'Web > HTML | CSS|JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트를 사용하지 않은 슬라이드 이미지 만들기(HTML, CSS) (0) | 2020.07.21 |
|---|---|
| transfrom, keyframes 도형 회전하기(HTML, CSS) (0) | 2020.07.18 |
| hover, transition를 이용한 버튼 (HTML, CSS) (0) | 2020.07.18 |
| hover, keyframes를 이용한 버튼(HTML, CSS) (0) | 2020.07.15 |
| 햄버거 메뉴 토글 기능 만들기(HTML, CSS) (0) | 2020.07.15 |
