호버 효과가 있는 CSS 3D 버튼

17281 단어 beginnerstutorialcsswebdev
간단한 호버 효과가 있는 기본 3D css 버튼입니다.

더 많은 코드 예제를 보려면 여기를 방문하십시오 - link

3D 버튼을 만들려면 먼저 기본 html 형식으로 시작합니다.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
</head>
</body>
</html>


내부 본문은 "table_center"클래스로 새 div를 만듭니다. 이 컨테이너는 버튼을 화면 중앙에 맞추는 데 사용됩니다.

<div class="table_center"></div>


div 안에 "a"태그를 만듭니다. 이것은 버튼이 될 것입니다.

  <div class="table_center">
       <a href="#">click</a>
  </div>


이제 스타일 부분이 나옵니다. 먼저 기본 스타일을 제거하고 Google 글꼴을 가져옵니다.

@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

html{
   height:100%;
   width:100%;
}

html, body{
  padding: 0;
  margin: 0;
  font-family: 'Raleway', sans-serif;
}


몸을 스타일링하십시오.

body{
   background-color: #ededed;
   height:100%;
   display:table;
   width:100%;
   text-align:center;
}


Div 컨테이너의 스타일을 지정합니다.

.table_center{
  display:table-cell;
  vertical-align: middle;
}


이제 일반 버튼의 스타일을 지정합니다.

 a{
  text-decoration:none;
  color:#000;
  margin:auto;
  width:150px;
  display:inline-block;
  line-height:40px;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  background-color: #fff;
   border:5px solid #000;
   box-shadow:1px 1px 0, 2px 2px 0, 3px 3px 0, 4px 4px 0,5px 5px 0;
  position: relative;
}


버튼을 클릭한 후 버튼에 클릭 효과를 줍니다.

 a:after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width:100%;
   z-index: -1;
  background-color: #fff;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
}


간단한 호버 효과를 줍니다.

a:hover{
  background-color: transparent;
}
 a:hover:after{
  background-color: #f6d51e;
}


활성 선택기로 완료하십시오.

 a:active{
   top:5px;
   left:5px;
   box-shadow:0 0 0 0;
}


이제 클릭 효과와 호버 효과가 있는 CSS 3D 버튼이 준비되었습니다.

전체 코드를 복사하고 출력을 위해 실행합니다.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

html{
   height:100%;
   width:100%;
}

html, body{
  padding: 0;
  margin: 0;
  font-family: 'Raleway', sans-serif;
}

body{
   background-color: #ededed;
   height:100%;
   display:table;
   width:100%;
   text-align:center;
}

.table_center{
  display:table-cell;
  vertical-align: middle;
}
 a{
  text-decoration:none;
  color:#000;
  margin:auto;
  width:150px;
  display:inline-block;
  line-height:40px;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  background-color: #fff;
   border:5px solid #000;
   box-shadow:1px 1px 0, 2px 2px 0, 3px 3px 0, 4px 4px 0,5px 5px 0;
  position: relative;
}

 a:after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width:100%;
   z-index: -1;
  background-color: #fff;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
}
a:hover{
  background-color: transparent;
}
 a:hover:after{
  background-color: #f6d51e;
}

 a:active{
   top:5px;
   left:5px;
   box-shadow:0 0 0 0;
}
</style>
</head>
<body>
  <div class="table_center">
       <a href="#">
         click
       </a>
</div>
</body>
</html>


출력 -

좋아하는 IDE에서 로컬로 Google Apps 스크립트 코드를 작성하는 방법은 무엇입니까?
디버깅 기술을 향상시키는 5가지 JavaScript 콘솔 메서드🚀

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage