CSSを使ったボタンの作り方-CSSチュートリアル-php.cn

CSSを使ったボタンの作り方

不言

リリース： 2018-12-06 14:12:10

オリジナル

4800 人が閲覧しました

今日の記事では、通常の四角いボタン、丸いボタン、立体的なボタン、簡単なアニメーション付きのボタンの4つのボタン実装方法を紹介します。具体的な内容を見ていきましょう。

CSSを使ったボタンの作り方

#普通の四角ボタンの実装方法を見てみましょう

ボタンのコードは次のとおりです。以下

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<button>普通方形CSSを使ったボタンの作り方</button>
</body>
</html>

ログイン後にコピー

丸ボタンの実装方法

コードは以下の通りです

HTMLコード

<button class="kadomaru">圆角CSSを使ったボタンの作り方</button>

ログイン後にコピー

CSSコード

.kadomaru {
  width:100px;
  font-size:12px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  padding:10px 0 10px;
  background:#6BCBF6;
  border-radius: 20px;
}

ログイン後にコピー

#立体ボタンの実装方法

##コードは以下の通り

HTML コード

<button class="shadow">立体CSSを使ったボタンの作り方</button>

ログイン後にコピー

CSS コード

.shadow {
  width:100px;
  font-size:12px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  padding:10px 0 10px;
  background:#6BCBF6;
  border-radius:5px;
  box-shadow:1px 1px #1A6EA0;
}

ログイン後にコピー

box-shadow を使用して影のサイズと影の色を指定し、立体感を出します。

上記 3 つの方法で実現されるボタンの効果は次のとおりです。

最後の方法は、簡単なアニメーションを備えたボタンの実装です。具体的な例 CSSを使ったボタンの作り方

コードは次のとおりです

HTML コード

<div class="animation">
  <div class="effect"></div>
  <a href="#"> Touch me </a>

ログイン後にコピー

CSS コード

.animation {
  width:100px;
  height:50px;
  text-align:center;
  border:2px solid #BBBBBB;
  float:left;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
  margin:0 0 40px 0;
}
.animation a {
  font-family:arial;
  font-size:12px;
  color:#BBBBBB;
  text-decoration:none;
  line-height:50px;
  transition:all .10s ease;
  z-index:2;
  position:relative;
}
.effect {
  width:140px;
  height:50px;
  top:-2px;
  left:-140px;
  background:#BBBBBB;
  position:absolute;
  transition:all .5s ease;
  z-index:1;
}
.animation:hover .effect {
  left:0;
}
.animation:hover a {
  color:#FFFFFF;
}

ログイン後にコピー

カスタマイズの例を紹介します。 .effectのleft属性をright属性に、.animation:hover.effectのleft属性をright属性に変更すると右向きのアニメーションになります。

上記のコードを実行すると、次のような効果がブラウザに表示されます。

ボタンの上にマウスを置くと、右方向のボタンが表示されます。以下のようなアニメーションです。 CSSを使ったボタンの作り方