Michael Zippo
웹사이트를 디자인할 때 특정 방식으로 표시하려는 버튼이 있는 경우가 많습니다. 예를 들어, 버튼에 사용자의 관심을 끌기 위해 페이지의 다른 요소보다 배경색이 있는 버튼을 원할 수 있습니다.
CSS를 사용하여 개발자는 스타일이 있는 버튼을 만들 수 있습니다. CSS를 사용하면 무엇보다도 변경할 수 있습니다.
버튼의 색상, 텍스트 크기, 테두리, 너비 및 높이, 이 자습서에서는 예제와 함께 일련의 CSS 속성을 사용하여 HTML 스타일을 지정하는 방법에 대해 설명합니다. 단추. 이 튜토리얼을 다 읽을 때쯤이면 CSS를 사용한 버튼 스타일 지정의 전문가가 될 것입니다.
여러 HTML 방식으로 버튼을 정의할 수 있습니다. 가장 일반적인 두 가지 접근 방식은 Bootcamp 일치 항목 찾기
버튼의 스타일을 지정하려면, 즉 페이지의 모양을 사용자 정의하려면 css를 사용해야 합니다. 이 기사에서는 버튼에서 다음을 수행하는 방법에 대해 설명합니다. ..
가로 및 세로 버튼 그룹을 만드는 방법도 논의합니다.
버튼을 디자인하는 동안 가장 먼저 해야 할 일은 배경 색상을 설정하는 것입니다. 버튼에 대한 계획입니다. 기본적으로 버튼에는 흰색 배경이 있고 검은색 텍스트 CSS 배경색을 사용하여 c 버튼의 배경색을 변경합니다.
웹사이트용 버튼을 디자인하고 버튼의 배경색을 분홍색으로 지정하고 싶다고 가정해 보겠습니다. 다음 CSS 코드를 사용하여 버튼의 색상을 변경할 수 있습니다.
코드는 다음을 반환합니다.
배경색 속성을 사용하여 배경색을 변경했습니다. 이 속성을 사용하여 버튼의 배경색을 색상으로 변경할 수 있습니다.
버튼의 텍스트 색상을 변경하려면 color 속성. 버튼을 사용하고 버튼에 분홍색 배경과 텍스트가 녹색으로 표시되도록 하려면 다음 코드를 사용하여 이 버튼을 만들 수 있습니다.
코드 반환값:
버튼은 이전과 같은 크기이지만 지금은 내부의 문자 크기는 20px입니다. font size 속성을 사용하여 버튼의 텍스트 크기를 설정했습니다.
버튼을 디자인할 때 다음을 결정할 수 있습니다. 버튼 안의 텍스트와 버튼의 외벽 사이에 일정한 공간이 필요합니다. 여기에서 쿠션 속성이 작동합니다.
패딩 속성은 길이 표시기(px, em 및 등등) 또는 백분율 값을 사용하여 텍스트 버튼과 테두리 사이의 특정 공간을 정의합니다.
페이지에 두 개의 버튼을 만들고 싶다고 가정합니다. 한 버튼에는 40px 패딩이 있어야 하고 다른 버튼에는 40px 패딩이 있어야 합니다. 20px 패딩이 있어야 합니다. 다음 코드를 사용하여 이러한 버튼을 만들 수 있습니다.
코드 반환:
border-radius 속성을 사용하여 모서리가 둥근 직사각형 버튼을 만들 수 있습니다. 다음은 border-radius 속성을 사용하는 세 가지 코드 예제입니다. 다양한 반경 크기의 효과를 설명하기 위해 각 예제에서는 다른 크기의 테두리 반경을 사용합니다.
코드 반환:
버튼의 배경은 흰색이고 콘텐츠는 검정색이며 모든 가장자리에 25px 패딩이 있습니다. border 속성을 사용하여 3픽셀 너비의 실선 테두리를 만들었습니다. 버튼을 클릭하고 테두리 색상을 # ffb6c1로 설정합니다. 이는 연한 분홍색의 16진수 값입니다.
경계 속성에 대해 자세히 알아보려면 CSS 테두리 속성에 대한 기사를 읽어보세요.
선택기 CSS를 사용할 수 있습니다. hover는 사용자가 cursor.
검정색 텍스트와 흰색 배경이 있는 버튼을 만들고 사용자가 마우스를 가져갔을 때 텍스트 색상이 흰색으로 바뀌고 배경색이 녹색으로 바뀌기를 원한다고 가정해 보겠습니다. 그녀. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.
다음은 코드의 결과입니다.
위 다이어그램의 첫 번째 버튼은 버튼의 모양을 보여줍니다. 사용자가 버튼 위로 마우스를 가져갈 때와 같습니다. 보시다시피 코드는 검정색 텍스트, 분홍색 테두리 및 25픽셀 패딩이 있는 흰색 버튼을 반환합니다. 이것이 버튼의 기본 상태입니다. 그러나 마우스가 버튼 위로 마우스를 가져가면 버튼을 누르면 버튼의 배경색이 녹색으로 바뀌고 버튼의 텍스트 색상이 흰색으로 바뀝니다.
사용자의 커서가 버튼에서 멀어지는 즉시 버튼은 기본 상태로 돌아갑니다.
, 전환 기간 속성을 사용하여 사용자가 커서로 버튼을 가리킨 후 버튼이 변경되어야 하는 시간을 나타낼 수도 있습니다.따라서 위의 버튼이 변경되기 전에 1초가 걸리려면(녹색 배경 및 흰색 텍스트) 우리 이 코드를 사용할 수 있습니다.
이제 버튼 위로 마우스를 가져가면 변경 버튼에 1초가 걸립니다. CSS 전환에 대한 초보자 가이드 에서 CSS 전환에 대해 자세히 알아볼 수 있습니다.
사용할 수 있는 도구입니다. CSS box-shadow 속성은 버튼 그림자를 생성합니다. box-shadow 속성은 여러 매개변수를 허용합니다. box-shadow CSS 자습서에서 이러한 매개변수에 대해 자세히 알아볼 수 있습니다.
버튼을 디자인하고 원하는 그림자가 있습니다. 버튼에 대해 다음 코드를 사용하여 이 그림자를 만들 수 있습니다.
코드 반환:
이 예에서는 버튼에 그림자를 추가했습니다. 그림자에 대해 지정한 매개변수는 다음과 같습니다.
