CSS는 그라데이션 버튼의 효과를 실현합니다(코드 예)
- 不言원래의
- 2018-11-09 17:25:0818716검색
이 글에서는 그라데이션 색상 버튼을 만드는 효과에 대해 설명합니다. 내용이 매우 자세하게 설명되어 있으니 관심 있는 친구들이 구체적인 내용을 살펴보세요.
자세히 본론으로 들어가겠습니다~
그라디언트 버튼 코드는 다음과 같습니다.
button-gradient.css (css 파일)
.gradientButton{
border:1px solid #ff6a00;
width:100px; height:28px;
background:linear-gradient(to bottom, #fcffa2,#fbb700);/*设置按钮为渐变颜色*/
}button-gradient.html (html 파일)
<!DOCTYPE html>
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="button-gradient.css" />
</head>
<body>
<div><button type="submit" class="gradientButton">Button</button></div>
<hr />
</body>
</html>Gradient 색상 버튼 효과는 다음과 같습니다.
아이콘이 있는 그라데이션 버튼
이 코드는 그라데이션 버튼에 아이콘을 표시합니다.
코드는 다음과 같습니다.
image-button-gradient.css (css 파일)
#buttonImage {
background-image:url('/img/search.png');
display:inline-block;
margin-top:2px;
width:16px;
height:16px;
}
.flatbutton{
border:1px solid #3079ed;
width:100px;
height:28px;
background:linear-gradient(to bottom, #9bcfff,#4683ea);
} image-button-gradient.html (HTML 파일)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" type="text/css" href="image-button-gradient.css" /> </head> <body> <button class="flatbutton"><span id="buttonImage"></span></button> </body> </html>
설명: 이전 문자열 제목과 거의 동일합니다. 그라데이션 버튼입니다. 이미지를 표시하기 위해 버튼 태그에 SPAN 태그를 기술합니다.
효과는 다음과 같습니다.
위 내용은 CSS는 그라데이션 버튼의 효과를 실현합니다(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.