HTML과 CSS를 사용하여 버튼의 텍스트 표시 효과를 만드는 방법은 무엇입니까?

이 기사에서는 HTML과 CSS를 사용하여 버튼을 만들어 디스플레이 효과를 테스트하는 방법에 대해 설명합니다.

버튼은 모든 웹사이트에서 가장 중요한 사용자 인터페이스 구성 요소입니다. 버튼의 텍스트 표시 효과는 향상을 위한 제안이나 흥미로운 콘텐츠를 표시하는 데 사용됩니다. 사용자 경험.

접근 방식은 버튼과 동일한 치수의 스트립으로 버튼을 덮은 다음 마우스 오버 시 한 방향으로 움직이는 것입니다.

언급된 접근 방식을 진행하려면 CSS 속성을 사용하여 버튼 접근 방식에 대한 텍스트 표시 효과에 사용되는 두 개의 선택기와 마우스 오버에 대해 알아야 합니다.

::before 선택자는 다른 요소의 콘텐츠 앞에 동일한 콘텐츠를 여러 번 추가하는 데 사용되는 CSS 의사 요소입니다. 이 선택기는 ::after 선택기와 동일합니다. 선택한 요소의 첫 번째 하위 항목을 나타내는 의사 요소를 생성하는 데 도움이 되며, content 속성을 사용하여 요소에 장식 콘텐츠를 추가하는 데 자주 사용됩니다. 기본값은 인라인입니다.

문법

다음은 before 선택기의 구문입니다 -

:hover 선택기는 마우스를 요소 위로 가져갈 때 요소의 스타일을 지정하는 데 사용되는 CSS 의사 클래스입니다. 마우스를 요소 위로 가져가면 요소를 선택하여 모든 요소에 적용할 수 있습니다.

문법

다음은 before 선택기의 구문입니다 -

다음 HTML 코드 조각은 버튼 태그를 사용하여 간단한 버튼 생성을 구현합니다.

Index.html

CSS 코드 −

다음은 CSS 코드를 구현하는 단계입니다 −

1단계 − 둥근 모서리를 만들기 위해 패딩 및 테두리 반경을 추가하는 등 버튼에 기본 스타일을 적용합니다.

2단계 − 이제 이전 선택기를 사용하여 전체 버튼을 덮는 동일한 크기의 스트립을 만듭니다.

3단계 − 이제 예시에서 왼쪽으로 이동하는 것처럼 스트립을 원하는 방향으로 이동하려면 호버 선택기를 사용하세요.

참고 − 필요에 따라 스트립을 어떤 방향으로든 이동할 수 있으며, 다른 속성을 사용하여 원하는 대로 효과를 조정할 수도 있습니다.

Index.css

Example

Example

전체 코드 − 위의 두 가지 코드 부분을 결합한 것입니다.

element ::before{
   content:
}

지원되는 브라우저 − 포인터 이벤트 속성이 지원하는 브라우저는 다음과 같습니다 −

• 구글 크롬 1.0
• 엣지 12.0
• 인터넷 익스플로러 11.0
• 파이어폭스 1.5
• 오페라 9.0
• 사파리 4.0

참고 − Opera 4-6은 단일 콜론을 지원합니다.(::before).

이 문서에서는 HTML과 CSS를 사용하여 before 및 CSS 선택기를 사용하여 텍스트 표시 효과가 있는 버튼을 만드는 방법에 중점을 둡니다.

위 내용은 HTML과 CSS를 사용하여 버튼의 텍스트 표시 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!