CSS 버튼

CSS 버튼

     
  
CSS 按钮
 默认按钮 链接按钮 按钮   

버튼 색상

버튼 색상을 설정하기 위해 background-color 속성을 사용할 수 있습니다:

     
  
按钮颜色
 
我们可以使用 background-color 属性来设置按钮颜色:
 Green Blue Red Gray Black  

버튼 크기

font-size 속성을 사용하여 다음을 수행할 수 있습니다. 버튼 크기 설정:

둥근 버튼

테두리 반경 속성을 사용하여 둥근 버튼을 설정할 수 있습니다.

     
  
圆角按钮
 
我们可以使用 border-radius 属性来设置圆角按钮:
 2px 4px 8px 12px 50%  

버튼 테두리 색상

테두리 속성을 사용하여 설정할 수 있습니다. 버튼 테두리 색상:

     
  
按钮边框颜色
 
我们可以使用 border 属性设置按钮边框颜色:
 Green Blue Red Gray Black  

Mouseover 버튼

:hover 선택기를 사용하여 마우스오버 버튼의 스타일을 수정할 수 있습니다.

팁: 전환 기간 속성을 사용하여 "호버" 효과의 속도를 설정할 수 있습니다:

     
  
鼠标悬停按钮
 
我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。
 
提示: 我们可以使用 transition-duration 属性来设置 "hover" 效果的速度:
 Green Blue Red Gray Black  

버튼 그림자

box-shadow 속성을 사용하여 버튼에 그림자를 추가할 수 있습니다.

     
  
按钮阴影
 
我们可以使用 box-shadow 属性来为按钮添加阴影:
 阴影按钮 鼠标悬停后出现阴影  

Disabled 버튼

opacity 속성을 사용하여 버튼에 투명도를 추가할 수 있습니다( "비활성화된" 속성 효과처럼 보입니다).

팁: 커서 속성을 추가하고 "허용 안 함"으로 설정하여 비활성화된 이미지를 설정할 수 있습니다.

     
  
禁用按钮
 
我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。
 正常按钮 禁用按钮  

버튼 너비

기본적으로 버튼 크기는 버튼의 텍스트 내용에 따라 결정됩니다( 텍스트 내용 일치 길이에 따라). width 속성을 사용하여 버튼의 너비를 설정할 수 있습니다.

팁: 고정 너비를 설정하려면 픽셀(px)을 단위로 사용할 수 있고, 반응형 버튼을 설정하려면 다음을 수행할 수 있습니다. 백분율로 설정하세요.

     
  
按钮宽度
 
默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:
 
提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。
 250px
 50%
 100%  

버튼 그룹

여백을 제거하고 float:left를 추가하여 버튼 그룹을 설정하세요:

     
  
按钮组
 
移除外边距并添加 float:left 来设置按钮组:
 Button Button Button Button 

记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。
  

테두리가 있는 버튼 그룹

테두리 속성을 사용하여 테두리가 있는 버튼 그룹을 설정할 수 있습니다:

     
  
带边框按钮组
 
Add borders to create a bordered button group:
 Button Button Button Button 

记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。
  

버튼 애니메이션

화살표 추가 버튼 위로 마우스를 이동한 후 표시:

     
  
按钮动画
 Hover   

클릭 시 "물결" 효과 추가:

     
  
按钮动画 - 波纹效果
 Click Me  

클릭 시 "아래로 누르기" 효과 추가:

     
  
按钮动画 - "按压效果"
 Click Me