CSSでグラデーションボタンの効果を実現（コード例）-CSSチュートリアル-php.cn

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

不言

リリース： 2018-11-09 17:26:03

オリジナル

18746 人が閲覧しました

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

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

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

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でグラデーションボタンの効果を実現（コード例）