3D 버튼 효과를 구현하는 CSS

이번에는 CSS로 3D 버튼 효과를 구현하는 방법을 알려드리겠습니다. CSS로 3D 버튼 효과를 구현하기 위한 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

CSS는 상자 그림자를 교묘하게 사용하여 3D 객체의 입체 효과를 구현합니다. 버튼을 누르면 상자 그림자와 상단 값이 수정됩니다.

버튼을 누르고 있는 듯한 느낌을 줍니다. CSS 코드는 아래와 같이 매우 작습니다.

a.css-3d-btn{
 position: relative;
 color: rgba(255, 255, 255, 1);
 text-decoration: none;
 background-color: rgba(219, 87, 51, 1);
 font-family: "Microsoft YaHei", 微软雅黑, 宋体;
 font-weight: 700;
 font-size: 3em;
 display: block;
 padding: 4px;
 border-radius: 8px;
 /* let's use box shadows to make the button look more 3-dimensional */
 box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
 margin: 100px auto;
 width: 160px;
 text-align: center;
 -webkit-transition: all .1s ease;
 -moz-transition: all .1s ease;
 transition: all .1s ease;
}
/* now if we make the box shadows smaller when the button is clicked, it'll look like the button has been "pushed" */
a.css-3d-btn:active{
 box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
 position: relative;
 top: 6px;
}

효과는 다음과 같습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 콘텐츠를 보려면 비용을 지불하십시오. PHP 중국어 웹사이트의 다른 관련 기사도 주목하세요!

추천 도서:

삼각형을 만들려면 투명을 사용하세요

HTML5+CSS3 로딩 진행률 표시줄 및 다운로드 진행률 표시줄 구현

위 내용은 3D 버튼 효과를 구현하는 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!