CSS를 사용하여 버튼 버튼의 색상을 변경하는 방법에 대한 예제 분석

먼저 최종 렌더링을 살펴보겠습니다.

이것이 우리의 최고의 목표입니다. 관심이 있으시면 계속 읽으십시오.

우선 이 버튼은 CSS3.0의 새로운 스타일 속성을 사용합니다. 브라우저에 모서리 호 스타일이 표시되지 않으면 브라우저 버전이 CSS3.0의 새로운 스타일을 지원하지 않는다는 의미입니다. 해결책은 브라우저를 최신 버전으로 업그레이드하는 것입니다. 제가 아는 한, XP와 Windows Server 2003은 IE8까지 지원합니다(효과를 볼 수 있습니다). IE를 업그레이드하지 않으려면 Firefox와 같은 IE 기반이 아닌 브라우저를 다운로드해야 합니다. 구글, 오페라 등

자, 이제 말도 안 되는 일을 모두 마치고 아름다운 버튼을 만드는 방법을 살펴보겠습니다.

사실 여기서는 CSS 의사 요소를 사용합니다.

먼저 페이지에 입력 유형 버튼을 배치해야 합니다. 이 버튼 버튼에 CSS 스타일을 추가하세요.

구체적인 CSS 코드는 다음과 같습니다.

.mybtn {
    width:86px;
    text-align:center;
    line-height:100%;
    padding-top:0.5em;
    padding-right:2em;
    padding-bottom:0.55em;
    padding-left:2em;
    font-family:Arial,sans-serif;
    font-size:14px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    text-decoration:none;
    margin-top:0px;
    margin-right:2px;
    margin-bottom:0px;
    margin-left:2px;
    vertical-align:text-bottom;
    display:inline-block;
    cursor:pointer;
    zoom:1;
    outline-width:medium;
    outline-color:invert;
    font-size-adjust:none;
    font-stretch:normal;
    border-top-left-radius:0.5em;
    border-top-right-radius:0.5em;
    border-bottom-left-radius:0.5em;
    border-bottom-right-radius:0.5em;
    box-shadow:0px 1px 2px rgba(0,0,0,0.2);
    text-shadow:0px 1px 1px rgba(0,0,0,0.3);
    color:#fefee9;
    border-top-color:#da7c0c;
    border-right-color:#da7c0c;
    border-bottom-color:#da7c0c;
    border-left-color:#da7c0c;
    border-top-width:1px;
    border-right-width:1px;
    border-bottom-width:1px;
    border-left-width:1px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:solid;
    border-left-style:solid;
    background-image:none;
    background-attachment:scroll;
    background-repeat:repeat;
    background-position-x:0%;
    background-position-y:0%;
    background-size:auto;
    background-origin:padding-box;
    background-clip:padding-box;
    background-color:#f78d1d;
}

구체적인 CSS 스타일에 대한 설명을 보려면 Baidu를 방문하세요. 이 사이트는 CSS 수준을 향상시킬 수 있습니다. CSS 기술을 모르지만 이 효과를 사용하려면 버튼의 너비를 수정하여 버튼의 적절한 너비로 설정해야 합니다. 또 다른 것은 배경색을 바꾸는 것입니다.

CSS 스타일과 입력 버튼 버튼을 작성한 후에는 입력 버튼에 클래스만 추가하면 됩니다.

<input type="button" class="mybtn" value="我是按钮" />

이제 CSS의 의사 요소 호버를 사용하는

mybtn 호버 스타일 작성의 마지막 부분이 있습니다. 코드는 다음과 같습니다.

.mybtn:hover {
    background: #f47c20;
}

마우스가 위로 움직일 때 배경색만 수정하면 되므로 호버 스타일에서는 속성 하나만 수정하면 됩니다.

위 내용은 CSS를 사용하여 버튼 버튼의 색상을 변경하는 방법에 대한 예제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!