CSS로 방향으로 3D 버튼을 만듭니다

나는 내가 어떻게 이것에 우연히 발견했는지 잘 모르겠다. 그러나 무언가 가이 트윗으로 이끌었습니다

CSS 와이 방향 조명 커서 상호 작용을 한 사람이 있습니까? pic.twitter.com/zll7sk6kw5 그리고 나에게 그것은 도전입니다.

버튼 디자인은 깔끔합니다. 그러나 나는 직접 사본을하고 싶지 않았습니다. 대신, 우리는 "트위터"버튼을 만들기로 결정했습니다. 아이디어는 소셜 아이콘이있는 거의 투명한 버튼을 만듭니다. 그리고 그 사회적 아이콘은 아래 그림자를 던집니다. 버튼을 가로 질러 마우스를 움직이면 빛이 빛납니다. 버튼을 누르면 표면에 밀어 넣습니다. 최종 결과는 다음과 같습니다.

방향 조명 3D CSS 트위터 버튼?

? https://t.co/qpfzewumey를 통해 @codepen pic.twitter.com/zwfwtpaixo 이 기사에서는 당신이 어떻게 만들 수 있는지 살펴볼 것입니다. 멋진 것은, 당신이 원하는대로 아이콘을 교체 할 수 있다는 것입니다.

. 키 테이크 아웃

CSS 및 HTML을 사용하여 커서 움직임에 응답하여 사용자 상호 작용을 향상시키는 동적 조명 효과가있는 3D 버튼을 만듭니다. 버튼의 SVG 아이콘을 효율적으로 생성하도록 퍼그를 구현하여 Mixins를 사용하여 다른 아이콘을 쉽게 스왑하고 조정할 수 있습니다. '변환 스타일 : preserve-3d;`와 같은 CSS 속성을 조작하고 깊이와 관점을 제어하기 위해 변수를 사용하여 3D 시각적 효과를 달성합니다. `aria-hidden` 속성을 사용하고 화면 리더를 통해 대화식 요소를 인식 할 수 있도록 접근성을 향상시킵니다. CSS 전환 및 변환을 적용하여 버튼을 누르고있는 물리적 상호 작용을 시뮬레이션하여 사용자 경험에 현실감을 추가합니다. 부드러운 애니메이션을위한 GSAP를 사용하여 커서 위치를 기반으로 버튼을 가로 질러 빛의 빛을 움직이는 등 동적 효과를 위해 JavaScript를 사용하십시오.

마크 업 이와 같은 것을 만들기위한 첫 테이크 접근법은 마크 업을 발판하는 것입니다. 첫 번째 검사시 사용 된 소셜 아이콘을 복제해야합니다. 그리고이 작업을 수행하는 깔끔한 방법은 퍼그와 믹스 인 레버리지를 사용하는 것입니다.

여기, 우리는 트위터 아이콘의 SVG를 렌더링하기위한 믹스 인을 만들었습니다. 우리가 그렇게 호출하면 트위터 아이콘이 렌더링됩니다 :

그렇게하면 큰 트위터 아이콘을 줄 것입니다

펜을 참조하십시오 1. sitepoint (@sitepoint)로 아이콘 렌더링 Codepen에서.
소셜 아이콘 세트는 동일한 "0 0 24 24"뷰 박스를 사용하는 경향이 있으므로 제목과 경로 인수를 만들 수 있습니다.

그러면 우리의 트위터 아이콘이

가됩니다

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

그러나 우리는 그것을 전달할 수 있습니다. 그리고 우리가 사용하거나 반복하고 싶은 아이콘이 많으면 객체에 경로를 저장할 수 있습니다.

이것은 재사용 할 아이콘 믹스 인을 만드는 깔끔한 방법 일 수 있습니다. 이 예제에는 약간의 과잉이지만 주목할 가치가 있습니다.

이제 우리는 버튼에 약간의 마크 업이 필요합니다.

<span><span>+icon()</span>
</span>

접근성을 염두에 두는 것이 항상 좋습니다. 브라우저의 개발자 도구에서

접근성

패널을 확인하여 버튼이 제공하는 내용을 확인할 수 있습니다.

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

버튼 텍스트에 스팬을 넣고 Aria-Hidden으로 아이콘을 숨기는 것이 좋습니다. 스팬 텍스트도 숨길 수 있습니다.

우리는 이러한 aria-hidden 속성을 적용하기위한 다양한 옵션이 있습니다. 우리가 사용할 것은 Aria-Hidden을 적용하기 위해 Mixin 코드를 변경하는 것입니다.

퍼그와 함께 또 다른 깔끔한 방법은 모든 속성을 믹스 인으로 전달하는 것입니다. 이것은 우리가 일부 속성을 통과시키고 싶은 시나리오에서 유용합니다.

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

접근성

패널을 다시 확인하면 버튼은 "Twitter"만 읽습니다. 그리고 그것이 우리가 원하는 것입니다! 스타일 여기에 당신이 온 부분입니다 - 우리가 어떻게 스타일을 꾸미는 지. 우선, 우리는 이것을 다음과 같이 삭제했습니다 로 인해 버튼에 필요한 3D 변환을 만들 수 있습니다. 최종 데모에서이를 끄면 모든 것이 끊어진다는 것을 알 수 있습니다.

눈에서 스팬 텍스트를 숨기겠습니다. 우리는 여러 가지 방법으로 이것을 할 수 있습니다. ScreenReader의 요소가 아닌 우리 눈에서 요소를 숨기는 권장되는 방법 중 하나는 다음과 같은 스타일을 사용하는 것입니다.

버튼 작업을 시작하기 전에 장면을 기울일 것입니다. 우리는 변환을 사용하여이를 수행 할 수 있습니다. 여기서 우리는 그것을 원하는 위치로 가져 오기 위해 변환을 일으 킵니다. 나는 원본에 가까워지기 위해 라이브 스트림의 값을 여기에서 땜질하는 데 약간의 시간을 보냈습니다. 크기 변수도 알 수 있습니다. CSS 변수로 버튼에 대한 특정 사항을 구동 할 것입니다. 이렇게하면 값과 효과를 땜질하는 데 유용합니다. 일반적으로 우리는 이것들을 요구하는 범위 아래에 놓았습니다. 그러나 이와 같은 데모의 경우 : 파일 상단에 루트 아래에 넣습니다.

이것들은 우리가 함께 일하는 변수이며, 우리가 버튼을 쌓을 때 의미가있을 것입니다.

버튼 버튼으로 이동합시다! 버튼 요소가 장면 요소를 채 웁니다. 우리는 크기를 적용하고 버튼에 직접 변환 할 수있었습니다. 그러나 우리가 다른 버튼과 요소를 소개한다면, 우리는 그것들을 모두 변환하고 크기를 조정해야합니다. 이것은 일반적으로 CSS를 염두에 두어야합니다. 컨테이너 요소가 레이아웃을 지시하도록하십시오 :

여기서 우리는 버튼 스타일을 벗겨냅니다. 그리고 그것은 우리에게 이것을 준다.

펜을 참조하십시오 9. sitepoint의 스트립 버튼 스타일 (@sitepoint) Codepen에서.

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

다음으로, 우리는 버튼 내용과 그림자에 대한 공통 출발점을 만들어야합니다. 우리는 각 요소에 절대적인 위치를 제공함으로써이를 수행 할 수 있습니다. 컨텐츠는 이전에 정의한 깊이 변수를 기준으로 3D 번역을 갖습니다.

우리가 -radius 변수도 사용하는 방법에 주목하십시오.

펜을 참조하십시오 10. sitepoint (@sitepoint)로 버튼 깊이를 제공합니다. Codepen에서.

이 단계에서 두 아이콘을 구별하기는 어렵습니다. 그리고 지금은 그들을 스타일링하기에 좋은시기입니다. 기본 아이콘 스타일을 적용하고 각 SVG 아이콘에 대해 스코핑 필을 사용할 수 있습니다.

거기에 도착합니다! 그래도 아이콘은 현재 크기가 같지 않습니다. 우리는 그것을 얻을 것입니다.

펜을 참조하십시오 11. sitepoint (@sitepoint)로 스코핑 채우기를 적용하십시오. Codepen에서.

<span><span>+icon()</span>
</span>

버튼 프레스를 제자리에 놓아 봅시다. 이 부분은 정말로 빠르게 통합됩니다 :

그게 다야! 스코프 CSS 변수를 사용하여 z 축 변환을 제거합니다 : Active. 변환에 전환을 추가하면 순간이되지 않습니다.

펜을 참조하십시오 12. 켜기 : sitepoint (@sitepoint) by active by active Codepen에서.

남은 일은 버튼 레이어와 광택을 스타일링하는 것입니다. 그림자부터 시작하겠습니다 :

또 다른 스코프 스타일. 우리는 버튼을 누르면 그림자가 더 이상 흐려지지 않는다고 말합니다. 그리고 그림자를 흐리게하기 위해 CSS 필터 속성을 블러 필터와 함께 사용합니다. -Blur 변수를 가지고 플레이하고 무슨 일이 일어나는지 확인하십시오.

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

펜을 참조하십시오 13. sitepoint (@sitepoint)로 호버의 흐림을 줄입니다. Codepen에서.

컨텐츠 레이어의 경우 배경색을 사용한 다음 배경 필터를 적용합니다. 필터와 마찬가지로 배경 필터는 요소에 시각적 효과를 적용하는 방법입니다. 현재 일반적인 사용 사례는 "유리 모르피즘"에 Blur를 사용하는 것입니다.

우리는 -Blur의 값을 사용하고 배경 필터에 전환을 적용합니다. 우리가 -Blur 변수를 범위로 묶는 방식으로 인해 : Active는 거의 무료로 전환을 얻습니다. 오버플로 : 숨겨진 이유는 무엇입니까? 우리는 버튼 주위를 움직일 수있는 광택 요소를 기대하고 있습니다. 그래도 우리는 그것이 밖에서 방황하는 것을 원하지 않습니다.

펜을 참조하십시오 14. sitepoint의 컨텐츠 레이어 스타일링 (@sitepoint) Codepen에서.

그리고 지금, 퍼즐의 마지막 조각 - 그 빛이 빛납니다. 이것이 아이콘의 크기가 다른 원인입니다. 스타일이 없기 때문에 레이아웃에 영향을 미칩니다. 몇 가지 스타일을 알려 드리겠습니다 :

<span><span>+icon()</span>
</span>

그 절대 포지셔닝은 아이콘 크기를 분류 할 것입니다. 테두리 반경을 적용하면 스포트라이트 라운드가됩니다. 그리고 우리는 필터를 다시 사용하여 흐릿한 스팟 라이트 효과를 제공합니다. 우리는 끝에 밝기 필터를 묶어 흐릿한 후 조금 밝게 날려 버렸습니다.

.

펜을 참조하십시오 15. sitepoint의 스타일링 샤인 (@sitepoint) Codepen에서.

3D 번역을 사용하면 샤인이 버튼 위에 놓여 지도록합니다. 이런 식으로, 다른 요소들과 z- 싸움으로자를 가능성은 없습니다.

지금은 우리가 스타일에 필요한 전부입니다. 이제 일부 스크립트를위한시기입니다.

스크립트 편의를 위해 Greensock을 여기에서 사용할 것입니다. 그들은 우리가 원하는 것을위한 깔끔한 유틸리티를 가지고 있습니다. 그러나 우리는 바닐라 JavaScript에서 동일한 결과를 얻을 수 있습니다. "모듈"유형이있는 스크립트를 사용하고 있기 때문에 SkyPack을 활용할 수 있습니다.

그리고 이제 우리는 땜질을 시작할 준비가되었습니다. 우리는 버튼이 포인터 움직임에 응답하기를 원합니다. 우리가 원하는 첫 번째는 광택을 마치 포인터를 따르는 것처럼 번역하는 것입니다. 두 번째는 포인터의 위치에 따라 버튼을 바꾸는 것입니다. 우리가 필요한 요소를 잡고 문서에 기본 이벤트 청취자를 설정합시다 :

이 데모에서 포인터를 움직여 x와 y로 반환되는 귀중품을보십시오 : .

펜을 참조하십시오 16. SitePoint (@SitePoint)의 요소 잡기 및 이벤트 리스너 생성 Codepen에서.

이것은 가장 까다로운 비트입니다. 우리는 빛의 위치를 ​​해결하기 위해 약간의 수학이 필요합니다. 초기 재설정 후 Shine을 번역 할 것입니다. 이를 수용하기 위해 먼저 Shine 스타일을 업데이트해야합니다. 우리는 스코프 CSS 변수 -x 및 - -y를 사용하고 있습니다. 우리는 그들에게 -150의 폴백을 제공하므로 데모가로드 될 때 촬영되지 않을 것입니다.

그런 다음 업데이트 기능에서는 Shine의 새로운 위치를 계산합니다. 우리는 이것을 버튼 크기의 백분율로 기반으로합니다. 포인터 위치에서 버튼 위치를 빼서이를 계산할 수 있습니다. 그런 다음 우리는 그것을 입장으로 나눕니다. 마무리하려면 200을 곱하여 백분율을 얻습니다

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

예를 들어, pos_x : 와 같은 것입니다

잡음 포지션 x.

버튼 위치 x. 버튼 너비로 나뉩니다 200을 곱하십시오

우리는 광택이 버튼 크기의 절반이기 때문에 200을 곱합니다. 이 특정 부분은 포인터를 추적하여 3D 공간에 매핑하려고하기 때문에 까다 롭습니다. 버튼에이를 적용하려면 gsap.set을 사용하여 해당 CSS 변수를 설정할 수 있습니다. 그것은 제로 두 번째 트윈으로 작동하는 GSAP 방법입니다. 요소에서 값을 설정하는 데 특히 유용합니다

그러나 한 걸음 더 나아가려면 GSAP의 QuickSetter를 사용할 수 있습니다. 이는 많은 업데이트를하는 실제 시나리오에서 성능이 좋을 것입니다.

<span><span>+icon()</span>
</span>

업데이트 기능이 다음과 같이 보이게합니다

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

포인터를 따르는 정확도는 정확한 계산이 필요합니다. 버튼의 오버플로가 보이고 빛이 더 두드러지는이 데모와 함께 플레이하십시오. 샤인 요소가 추적을 잃는 방법을 알 수 있습니다.

펜을 참조하십시오 17. SitePoint에 의해 Shine Playground 번역 (@SitePoint) Codepen에서.

이 데모는 모든 것을 넣어야합니다

펜을 참조하십시오 18. SITEPOINT BY SHINE 번역 (@SitePoint) Codepen에서.

마지막 기능. 터치가 추가되도록 버튼을 바꾸겠습니다. 여기서 우리는 버튼의 이동을 포인터 위치에 기반으로합니다. 그러나 우리는 운동을 제한 할 것입니다. 이를 위해 다른 GSAP 유틸리티를 사용할 수 있습니다. 우리는 MapRange를 사용할 것입니다. 이를 통해 한 값 세트를 다른 값에 매핑 할 수 있습니다. 그런 다음 값을 전달하고 맵핑 된 값을 되 찾을 수 있습니다.

먼저, 우리는 운동 제한을 정의합니다. 이것은 버튼 크기의 백분율입니다

이제 업데이트 기능에서 시프트 백분율을 계산할 수 있습니다. 우리는 한계에 대해 창 너비를 매핑하여이를 수행합니다. 그리고 우리는 포인터 위치를 입력하여 매핑 된 백분율을 되 찾을 수 있습니다.

이 블록에서는 0의 범위를 Window.innerWidth에 -10에서 10에 대해 매핑합니다. 포인터 위치를 전달하면 -10에서 10 사이의 값이 제공됩니다. 그러면 해당 백분율 전환을 버튼에 적용 할 수 있습니다. . 우리는 수직 전환을 위해 똑같이 수행하며 이것은 다음과 같은 업데이트 기능을 제공합니다 :

.

그게 다야!

CSS와 약간의 스크립팅으로 방향 조명 3D 버튼을 만드는 방법입니다. 멋진 점은 우리가 상대적으로 쉽게 변화시킬 수 있다는 것입니다.

<span><span>+icon()</span>
</span>

최종 데모의 경우 몇 가지 추가 세부 사항을 추가하고 아이콘을 변경했습니다. 당신은 그것을 인식 할 수 있습니다.

펜을 참조하십시오 20. sitepoint의 sitepoint 버튼 (@sitepoint) Codepen에서.

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

언제나 그렇듯이 읽어 주셔서 감사합니다. 더보고 싶어? 트위터에서 나를 찾거나 라이브 스트림을 확인하십시오!

CSS로 방향으로 조명 3D 버튼을 만드는 것에 대해 자주 묻는 질문 클릭 할 때 변경되는 CSS를 사용하여 3D 버튼을 만들 수있는 방법?

클릭 할 때 변경되는 3D 버튼을 만들면 CSS의 Active Pseudo-Class를 사용하는 것과 관련이 있습니다. 이 의사 클래스는 사용자가 활성화 할 때 요소를 스타일링하는 데 사용됩니다. 예를 들어 클릭하면 버튼의 색상, 크기 또는 위치를 변경할 수 있습니다. 간단한 예가 있습니다. >}

이 예에서는 버튼의 배경색이 클릭하면 다른 녹색 음영으로 변경됩니다. Box-Shadow 속성은 그림자 효과를 추가하고 변환 속성이 ​​버튼을 약간 아래로 이동시킵니다.

3D 버튼에 호버 효과를 추가 할 수 있습니까?

에 호버 효과를 추가하면 CSS의 호버 의사 클래스를 사용하여 3D 버튼을 달성 할 수 있습니다. 이 의사 클래스는 마우스 포인터가 끝날 때 요소를 스타일링하는 데 사용됩니다. 호버링되면 색상, 크기를 변경하거나 버튼에 그림자를 추가 할 수 있습니다. 간단한 예가 있습니다. 가리개가 끝날 때 버튼의 배경색이 다른 녹색 음영으로 바뀌고 그림자 효과가 추가됩니다.
3D 버튼을 반응하게 만드는 방법

3D 버튼 반응을 만드는 방법은 미디어 사용과 관련이 있습니다. CSS의 쿼리. 미디어 쿼리를 사용하면 다양한 장치 나 화면 크기에 다른 스타일을 적용 할 수 있습니다. 예를 들어 화면 크기에 따라 버튼의 크기 또는 위치를 변경할 수 있습니다. 간단한 예는 다음과 같습니다.
@Media 화면 및 (max-width : 600px) {
.button {
너비 : 100%;
패딩 : 20px;

} }

이 예에서는 버튼의 너비가 100%로 설정되고 화면 크기가 600px 이하이면 패딩이 증가합니다.

3D 버튼에 전환 효과를 어떻게 추가 할 수 있습니까?
.button {
전환 : 배경색 0.5s 편의, Box-Shadow 0.5s Ease;
}
이 예에서는 배경색과 그림자입니다. 0.5 초에 걸쳐 점차적으로 변경 코너 둥근 모서리가있는 3D 버튼을 만들 수 있습니까?

둥근 모서리가있는 3D 버튼을 만드는 것은 CSS의 Border-Radius 속성을 사용하는 것과 관련이 있습니다. 이 속성을 사용하면 둥근 경계를 요소에 추가 할 수 있습니다. 예를 들어 버튼 모서리를 둥글게 만들 수 있습니다. 간단한 예는 다음과 같습니다.

.Button { border-radius : 12px; 이 예에서는 버튼의 모서리가 12px의 반경으로 둥글게됩니다. > 그라디언트 배경으로 3D 버튼을 만드는 방법은 무엇입니까?

그라디언트 배경으로 3D 버튼을 만드는 것은 CSS의 선형 그레이드 기능을 사용하는 것과 관련이 있습니다. 이 기능을 사용하면 둘 이상의 색상으로 전환되는 그라디언트를 만들 수 있습니다. 간단한 예는 다음과 같습니다.
.button {
배경 : 선형 별 (오른쪽으로, #ff7f00, #ff5500); }

이 예에서는 버튼의 배경이 a에서 전환됩니다. 밝은 오렌지색으로 밝은 주황색 색상.

그림자 효과로 3D 버튼을 만들 수 있습니까?

그림자 효과로 3D 버튼을 만드는 방법은 CSS의 Box-Shadow 속성을 사용하는 것과 관련이 있습니다. . 이 속성을 사용하면 요소에 그림자를 추가 할 수 있습니다. 예를 들어, 버튼에 그림자를 추가하여 3D로 보이게 할 수 있습니다. 간단한 예는 다음과 같습니다.
.Button { box-shadow : 0 5px 15px rgba (0,0,0,0.3);
}
이 예에서는 버튼에 A가 있습니다. 버튼 아래 5px이고 반경이 15px가있는 그림자. 그림자의 색상은 반투명 한 검은 색입니다.

테두리가있는 3D 버튼을 어떻게 만들 수 있습니까?

테두리로 3D 버튼을 만들면 CSS의 테두리 속성을 사용하는 것과 관련이 있습니다. 이 속성을 사용하면 요소에 테두리를 추가 할 수 있습니다. 예를 들어, 버튼에 테두리를 추가하여 눈에 띄게 만들 수 있습니다. 간단한 예는 다음과 같습니다.

.button { 테두리 : 2px solid #ff5500; }

이 예에서는 버튼에 오렌지색이있는 2px 솔리드 테두리가 있습니다.

내부에 텍스트가있는 3D 버튼을 만드는 방법?
내부에 텍스트가있는 3D 버튼을 만드는 것은 CSS의 텍스트 속성을 사용하는 것과 관련이 있습니다. 이러한 속성을 사용하면 요소 내부의 텍스트를 스타일링 할 수 있습니다. 예를 들어, 버튼 내부의 텍스트의 색상, 크기 또는 글꼴을 변경할 수 있습니다. 간단한 예는 다음과 같습니다.
.button {
컬러 : #fff; font-family : arial, sans-serif;

}

이 예에서 버튼 내부의 텍스트는 흰색이며 크기가 20px이며 Arial Font를 사용합니다. 모든 브라우저와 호환되는 3D 버튼을 어떻게 만들 수 있습니까?

모든 브라우저와 호환되는 3D 버튼 생성 CSS에서 공급 업체 접두사를 사용하는 것과 관련이 있습니다. 이 접두사를 사용하면 모든 브라우저에서 완전히 지원되기 전에 새로운 CSS 기능을 사용할 수 있습니다. 예를 들어, Chrome 및 Safari 용 -webkit- 접두사, Firefox 용 -Moz- 접두사 및 Internet Explorer의 -ms- 접두사를 사용할 수 있습니다. 간단한 예는 다음과 같습니다.

.Button { -ms-ms-transition : 배경색 0.5S 편의, Box-Shadow 0.5S 편의;
전환 : 배경색 0.5S 편의, Box-Shadow 0.5S 편의; 🎜>} 이 예에서는 전환 효과가 Chrome, Safari, Firefox 및 Internet Explorer와 호환됩니다.

위 내용은 CSS로 방향으로 3D 버튼을 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!