빛나는 버튼 효과를 얻기 위한 CSS(코드 예)

우리는 버튼 효과를 자주 사용합니다. 이 글에서는 CSS를 사용하여 빛나는 버튼 효과를 구현하는 방법을 알려드리겠습니다.

자세히 코드를 살펴보겠습니다.

다음 코드는 모든 버튼 스타일의 기본 코드입니다.

HTML

<a class="button" href="#">Button</a>

CSS

.button {
width:80px;
height:20px;
  display: block;  
  padding: 1em 3.2em;  
  border-radius: 1.6em;  
  color: #fff;  
  font-size: 18px;  
  font-family: 'Lato', sans-serif;  
  font-weight: 700;  
  text-align: center;  
  text-decoration: none;
  }

기본 색상은 아래 버튼 1에서 버튼 4로 변경되었으며, box-shadow를 통해 버튼 본체의 색상 투과율을 조정하여 각 버튼에 사용되는 그림자를 표현합니다. 버튼5부터 그라데이션 효과를 적용한 버튼 디자인을 시작해 보세요. 구체적인 코드 구현을 살펴보겠습니다.

button1:

.button {
  background-color: rgba(252, 28, 143, 1);  
  box-shadow: 0 5px 20px rgba(252, 28, 143, .5);
}

효과는 다음과 같습니다.

button2:

.button{
background-color: rgba(251, 152, 11, 1);  
box-shadow: 0 5px 20px rgba(251, 152, 11, .5);
}

효과는 다음과 같습니다.

button3:

.button {
  background-color: rgba(241, 196, 15, 1);  
  box-shadow: 0 5px 20px rgba(241, 196, 15, .5);
}

효과는 다음과 같습니다.

button4:

.button {
  background-color: rgba(0, 63, 255, 1);  
  box-shadow: 0 5px 20px rgba(0, 63, 255, .5);
}

효과는 다음과 같습니다.

button5:

기본 모양은 "button4"이며, box-shadow는 그림자를 설정하여 아래에 붙은 그림자의 위치를 ​​변경합니다.

.button {
  background-color: rgba(0, 63, 255, 1);  
  box-shadow: 0 0 40px rgba(0, 63, 255, .7);
}

효과는 다음과 같습니다:

button6:

이것은 inset에서 지정한 "button4" 위치에 추가한 상자 그림자입니다.

.button {
  background-color: rgba(0, 63, 255, 1);  
  box-shadow: 0 5px 20px rgba(0, 63, 255, .5), 0 0 40px rgba(255, 255, 255, .5) inset;
}

효과는 다음과 같습니다.

button7:

그라디언트 유형의 버튼을 사용하여 다양한 색상을 결합하고 각도를 조정하세요.

.button {
  background: linear-gradient(-45deg, rgba(87, 225, 181, 1) 0%, rgba(0, 63, 255, 1) 100%);  
  box-shadow: 0 5px 20px rgba(0, 63, 255, .5);
}

효과는 다음과 같습니다.

위는 이 기사의 전체 내용입니다. 더 많은 흥미로운 콘텐츠를 보려면

CSS Video Tutorial 및 CSS3 Video Tutorial 열을 참조하세요. PHP 중국어 웹사이트의 비디오 튜토리얼 칼럼! ! !

위 내용은 빛나는 버튼 효과를 얻기 위한 CSS(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!