CSS16 hover, keyframes를 이용한 버튼(HTML, CSS) DOCTYPE html> Document body{ margin: 0; padding: 0; background: #000; } .container { width: 100%; height : 100vh; display:flex; align-items: center; justify-content: center; } button{ position: relative; cursor: pointer; border: none; width: 500px; height: 200px; border-radius: 60px; background: linear-gradient(90deg, #ff00d9, #ff0000, #fda502, #ff00d9); background-size: 300%; color:#fff; font-s.. 2020. 7. 15. 햄버거 메뉴 토글 기능 만들기(HTML, CSS) DOCTYPE html> Documentbody{ background-color: white;}.container{ position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);}.menu{ width: 149px; height: 149px; background-color: #ee81b7; box-shadow: 0 0 35px rgb(6, 253, 59); cursor: pointer; position: relative; border-radius: 12px;} div{ position: absolute; height: 11px; background-color: white; transition: width 0.5s ease; borde.. 2020. 7. 15. hover를 이용한 메뉴바 menubar (HTML, CSS) DOCTYPE html> Documentbody{ 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 .. 2020. 7. 15. 메뉴바(menubar) 만들기(HTML, CSS, JAVASCRIPT) DOCTYPE html> Document*{ margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif;}body{ display: flex; justify-content: center; align-items: center; min-height: 100vh;}nav{ position: relative; display: flex;}nav a{ position: relative; margin: 0 20px; font-size:2em; color:#000000; text-decoration: none;}nav #underline{ position: absolute; left: 0; height: 4px; width: 0; background:.. 2020. 7. 15. 이전 1 2 3 4 다음
