SeaPlus

[구현] 반짝 거리는 효과는 언뜻 보기에 복잡해 보이지만 가상선택자로 가상의 요소를 만들면 쉽게 구현 할수 있다. 1. 버튼을 만든다 2. before 가상 선택자를 사용해 흰색의 그라데이션 가상요소를 생성한다. 3. 가상요소의 위치를 왼쪽 -> 오른쪽으로 이동시킨다. [HTML] shine Button shine Button [css] * { box-sizing: border-box; margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } a { position: relative; padding: 15px 30px..

[HTML] Button [CSS] * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #000; } a { z-index: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 60px; background: linear-gradient(90deg, #03a9f4, #f441f4, #ffeb3b, #03a9f4); /* 배경사이즈를 x축, y축으로 4배 늘린다. */ background-size: 400%; color: #fff; border-radius: 30px; text-align: ce..

[기능 구현] 이 버튼효과는 보기에는 약간 복잡해 보이지만 가상선택자 after 와 before을 통해서 간단히 만들수 있다. 구체적인 순서는 1. 버튼 구현 a 태그로 버튼모양 구현 2. after, before을 이용해 border의 모양 바꾸기 a::before 가상선택자로 기존의 a 태그보다 x축으로 넓이가 좀더 길고 y축으로 높이가 좀더 짧은 가상요소를 생성한다. a::after 가상선택자로 기존의 a 태그보다 Y축으로 높이가 좀더 길고 x축으로 넓이가 좀더 짧은 가상요소를 생성한다. 3. transition과 transform 활용 -transform의 scale을 줄이는 효과 를 적용하고 transition으로 부드럽게 사라지도록 한다. after요소는 x축 넓이가 커서 결과적으로 borde..

[구성효과] 1. text 색상이 #000 -> #fff로 바뀐다. 2. 마우스가 올라갈 시 버튼 배경의 painting 효과가 나타난다. 두개의 효과 다 transition 을 사용해 구현할수 있고, painting 효과는 넓이가 0%->100% 로 변환 하게 하면 된다. painting 효과는 img 파일. [HTML] Read More Read More [css] @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Poppins", sans..

- after 가상 요소를 이용해 동적인 효과 구현! - after 가상 요소의 넓이를 0 으로 지정한 뒤 커서가 올라갔을때(hover) 넓이를 100%로 늘린다. - transition 으로 변화 속도 조절 * { box-sizing: border-box; margin: 0px; padding: 0px; } body { display: flex; justify-content: center; align-items: center; font-family: "Lato", sans-serif; height: 100vh; width: 100%; } button, input, textarea { font-family: "Lato", sans-serif; } button { border: none; backgroun..