CSS 웹 버튼 디자인: 다양하고 멋진 버튼 스타일 만들기-CSS 튜토리얼-php.cn

CSS 웹 버튼 디자인: 다양하고 멋진 버튼 스타일 만들기

WBOY

풀어 주다： 2023-11-18 10:28:10

원래의

1653명이 탐색했습니다.

CSS 웹 버튼 디자인: 다양하고 멋진 버튼 스타일 만들기

CSS 웹 버튼 디자인: 다양하고 멋진 버튼 스타일을 만들려면 구체적인 코드 예제가 필요합니다

웹 디자인에서 버튼은 사용자와 웹사이트를 연결하는 역할뿐만 아니라 웹사이트의 연결성을 높이는 매우 중요한 요소입니다. 전반적인 시각 효과 및 사용자 경험. 좋은 버튼 스타일은 매력적인 외관을 가져야 할 뿐만 아니라 클릭 효과, 호버 효과 등과 같은 일부 기능적 세부 사항도 고려해야 합니다. 이 기사에서는 몇 가지 CSS 버튼 디자인 기술과 멋진 스타일을 공유하고 코드 예제를 제공하여 버튼을 더 잘 디자인하고 웹사이트와 애플리케이션에 더 많은 창의성을 추가할 수 있기를 바랍니다.

1. 기본 CSS 버튼

먼저 가장 기본적인 CSS 버튼 스타일을 살펴보겠습니다.

HTML 코드:

<button class="btn">Click me</button>

로그인 후 복사

CSS 스타일:

.btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn:hover {
  background-color: #3e8e41;
}

로그인 후 복사

이 버튼은 녹색 배경, 흰색 텍스트 및 둥근 테두리를 가지고 있습니다. 마우스를 버튼 위로 가져가면 배경색이 진한 녹색으로 변경되어 간단한 호버 효과를 얻을 수 있습니다. 이 버튼 스타일은 기본적으로 대부분의 시나리오에 적용될 수 있습니다.

2. 3D 입체 효과 버튼

3D 입체 효과 버튼을 만들어 보겠습니다:

HTML 코드:

<button class="btn-3d">Click me</button>

로그인 후 복사

CSS 스타일:

.btn-3d {
    border: none;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    margin: 20px;
    padding: 10px 20px;
    position: relative;
    text-align: center;
    text-shadow: rgba(0,0,0,.4) 1px 1px;
    transform-style: preserve-3d;
    transition: all .3s ease-out;
    background: linear-gradient(to bottom, #556270 0%,#616161 100%);
    background-color: #556270;
}

.btn-3d:before,
.btn-3d:after {
    border: none;
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
    height: 4px;
    width: 100%;
    transform-style: preserve-3d;
    transition: all .3s ease-out;
}

.btn-3d:before {
    background: #BD3F32;
    transform: translateZ(-1px);
    box-shadow: 0 0 8px rgba(189,63,50,.7);
}

.btn-3d:after {
    background: #3F7FBC;
    transform-origin: left;
    transform: rotateY(90deg) translateZ(-1px);
    box-shadow: 0 0 8px rgba(63,127,188,.7);
}

.btn-3d:hover {
    background: linear-gradient(to bottom, #BD3F32 0%,#616161 100%);
    transform: translateZ(-6px);
    text-shadow: none;
    box-shadow: 0 0 8px rgba(0,0,0,.5);
}

.btn-3d:hover:before {
    transform: translateZ(-13px) rotateY(60deg);
}

.btn-3d:hover:after {
    transform: rotateY(-60deg) translateZ(-13px);
    transition-delay: .05s;
}

로그인 후 복사

이 버튼 스타일은 확실한 3D 입체 효과와 호버 상태를 갖습니다. 사용자에게 시각적인 영향을 줄 뿐 아니라 사용자 경험도 향상시킵니다.

3. 배경 변경 버튼

다음 버튼 스타일은 배경색의 그라데이션 변경을 통해 사용자에게 더 나은 시각적 신호를 제공합니다.

HTML 코드:

<button class="btn-change">Click me</button>

로그인 후 복사

CSS 스타일:

.btn-change {
    cursor: pointer;
    display: inline-block;
    margin: .5rem;
    padding: .75rem 1.5rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.btn-change:before {
    border-right: 1px solid white;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: skew(-15deg) scaleY(1.4);
    width: 0;
}

.btn-change:hover:before {
    width: 100%;
    transition: all .3s ease;
}

.btn-change:after {
    border-left: 1px solid white;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: skew(15deg) scaleY(1.4);
    width: 0;
}

.btn-change:hover:after {
    width: 100%;
    transition: all .3s ease;
    transition-delay: .15s;
}

로그인 후 복사

이 버튼 스타일의 특징은 배경이 호버 상태에서는 색상이 더 점진적으로 변경되어 사용자에게 시각적으로 더 나은 안내를 제공할 수 있습니다.

4. 속이 빈 효과 버튼

다음으로 아주 멋진 속이 빈 효과 버튼 스타일을 만들어 보겠습니다.

HTML 코드:

<button class="btn-void">Click me</button>

로그인 후 복사

CSS 스타일:

.btn-void {
    border: solid 2px #bada55;
    background: none;
    color: #bada55;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 24px;
    position: relative;
    transition: all .35s;
    overflow: hidden;
}

.btn-void:before,
.btn-void:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #bada55;
    transition: all .35s;
}

.btn-void:before {
    height: 0%;
    width: 100%;
}

.btn-void:after {
    height: 100%;
    width: 0%;
}

.btn-void:hover,
.btn-void:focus,
.btn-void:active {
    border-color: #bada55;
    color: #fff;
}

.btn-void:hover:before,
.btn-void:focus:before,
.btn-void:active:before {
    height: 100%;
}

.btn-void:hover:after,
.btn-void:focus:after,
.btn-void:active:after {
    width: 100%;
}

로그인 후 복사

이 버튼 스타일의 특징은 마우스를 올리면 버튼 주변 영역 흰색 테두리가 나타나고, 버튼 내부의 직사각형 모양 영역이 흰색으로 바뀌며, 버튼 텍스트가 녹색으로 변합니다. 전체가 복원되면 그라데이션 효과가 나타납니다.

5. 로딩 버튼

마지막으로 로딩 상태를 나타내는 버튼 스타일을 살펴보겠습니다:

HTML 코드:

<button class="btn-loading">Submit</button>

로그인 후 복사

CSS 스타일:

.btn-loading {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  position: relative;
}

.btn-loading:after {
  content: "";
  position: absolute;
  top:50%;
  left: 50%;
  border: 6px solid #e6e6e6;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  border-top-color: #3498db;
  animation: spin 2s linear infinite;
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn-loading.loading:after {
  display: block;
}

로그인 후 복사

이 버튼 스타일의 특징은 제출 버튼을 클릭한 후 버튼이 콘텐츠는 숨겨지고 사용자에게 콘텐츠가 로드 중임을 알리는 회전 애니메이션이 표시됩니다. 전체적인 효과는 비교적 직관적입니다.

요약

위의 5가지 버튼 스타일 소개를 통해 좋은 버튼에는 매력적인 시각적 효과가 필요할 뿐만 아니라, 이후 호버 상태의 변화와 같은 일부 기능적 세부 사항에도 주의가 필요하다는 것을 분명히 알 수 있습니다. 클릭 상호작용 등 본 글에서 제공하는 버튼 스타일은 모두 CSS를 기반으로 작성되었으며 실제 프로젝트에 쉽게 적용할 수 있습니다. 웹 페이지를 작성할 때 일부 특수 효과 구현에 더 주의를 기울이고 필요에 더 잘 맞는 버튼을 만들 수 있습니다.

위 내용은 CSS 웹 버튼 디자인: 다양하고 멋진 버튼 스타일 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!