버튼2 CSS를 활용한 a태그 버튼 예제 1 CSS 애니메이션을 활용하여 태그로 만든 버튼에 다양한 애니메이션 효과를 추가할 수 있습니다. 아래는 버튼에 마우스를 올렸을 때 색상이 변하고, 크기가 살짝 커지는 애니메이션 효과를 적용한 예제입니다. Hover Me!" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 Hover Me!.container { text-align: center;}/* 애니메이션 버튼 스타일 */.animated-button { background-color: #4CAF50; /* 기본 배경색 */ color: white; padding: 15px 30px; text-align: center; text-decoration: none; font-size.. 2024. 10. 3. ccs로 화살표 만들기 1 너비와 폭을 같은 수치로 지정해서 정사각형을 만듭니다. 그리고 border로 테두리를 만들어주는데, 여기서 서로의 꼭지점이 연결되는 두 곳만 테두리를 만들어줍니다. (①border-top, border-left ②border-top, border-right ③border-bottom, border-left ④border-bottom, border-right) 다음으로 기울이기(ratate) 코드를 이용해서 방향을 맞춰줍니다. 위쪽 방향 정사각형 테두리가 왼쪽과 아랫쪽만 지정되어있으므로, 기울기를 135deg로 돌려줍니다. 활용 예) footer부분에서 페이지 상단으로 이동할 때 많이 쓰입니다. .arrow01 { display: inline-block; width: 50px; height: 50px; b.. 2023. 3. 13. 이전 1 다음
