ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでグラデーションボタンの効果を実現(コード例)

CSSでグラデーションボタンの効果を実現(コード例)

不言
不言オリジナル
2018-11-09 17:25:0818732ブラウズ

この記事では、グラデーション カラー ボタンを作成する効果について説明します。興味のある方は、具体的な内容をご覧ください。

早速、本題に入りましょう~

グラデーション ボタンのコードは次のとおりです:

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>

グラデーション ボタンの効果は次のとおりです:

CSSでグラデーションボタンの効果を実現(コード例)

##アイコン付きのグラデーション ボタン

このコードは、グラデーション ボタンにアイコンを表示します。

コードは次のとおりです。

image-button-gradient.css (CSS ファイル)

#buttonImage {
  background-image:url(&#39;/img/search.png&#39;);  
  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>

説明: 前の文字列タイトルのグラデーション ボタンとほぼ同じです。画像を表示するには、buttonタグ内にspanタグを記述します。

効果は次のとおりです:


CSSでグラデーションボタンの効果を実現(コード例)

以上がCSSでグラデーションボタンの効果を実現(コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。