STAFF BLOG

CSSのみで作るボタンデザイン

Web制作

2020/3/10

CSSのみで作るボタンデザイン

画像は使用せずにHTMLとCSSのみで作るボタンデザインを紹介します。
コピーで使用する場合はフォントサイズによって位置がズレる事がありますので、CSSで調整をしてください。

1 ボタンデザインとCSSソースコード

ボタンデザインとCSSソースコード

じわっと背景色が変わる

SAMPLE: Button

<a href="#" class="btn01">Button</a>

1	<a href="#" class="btn01">Button</a>

.btn01 {
  display:block;  
  max-width: 180px;
  border: 2px solid #E74109;
  font-size: 16px;
  color: #E74109;
  font-weight: bold;
  padding:16px;
  text-align: center;
  border-radius: 4px;
  transition: .4s;
}
.btn01:hover {
  background-color: #E74109;
  border-color: #E74109;
  color: #FFF;
}

.btn01 {

display:block;

max-width: 180px;

border: 2px solid #E74109;

font-size: 16px;

color: #E74109;

font-weight: bold;

padding:16px;

text-align: center;

border-radius: 4px;

transition: .4s;

}

.btn01:hover {

background-color: #E74109;

border-color: #E74109;

color: #FFF;

}

立体的なCSSボタン

SAMPLE: Button

<a href="#" class="btn02">Button</a>

1	<a href="#" class="btn02">Button</a>

.btn02 {
  display:block;  
  max-width: 180px;
  background-color: #E74109;
  border-bottom: solid 6px #a83109;
  font-size: 16px;
  color: #FFF;
  font-weight: bold;
  padding:16px;
  text-align: center;
  border-radius: 4px;
}
.btn02:active {
  border-bottom: none;
  transform: translateY(4px);
}

.btn02 {

display:block;

max-width: 180px;

background-color: #E74109;

border-bottom: solid 6px #a83109;

font-size: 16px;

color: #FFF;

font-weight: bold;

padding:16px;

text-align: center;

border-radius: 4px;

}

.btn02:active {

border-bottom: none;

transform: translateY(4px);

}

動くグラデーションボタン

SAMPLE: Button

<a href="#" class="btn03">Button</a>

1	<a href="#" class="btn03">Button</a>

.btn03{
  display: inline-block;
  width: 180px;
  text-align: center;
  background: linear-gradient(90deg, rgb(231, 65, 9), rgb(250, 239, 57));
  background-size: 200%;
  color: #FFF;
  font-size: 16px;
  text-decoration: none;
  font-weight: bold;
  padding: 16px;
  border-radius: 4px;
  transition: .4s;
}
.btn03:hover {
  background-position: right center;
}

.btn03{

display: inline-block;

width: 180px;

text-align: center;

background: linear-gradient(90deg, rgb(231, 65, 9), rgb(250, 239, 57));

background-size: 200%;

color: #FFF;

font-size: 16px;

text-decoration: none;

font-weight: bold;

padding: 16px;

border-radius: 4px;

transition: .4s;

}

.btn03:hover {

background-position: right center;

}

▼グラデーション css ジェネレーター▼

ボーダースタイルを変更する

SAMPLE: Button

<a href="#" class="btn04">Button</a>

1	<a href="#" class="btn04">Button</a>

.btn04{
  display:block;
  text-align: center;
  max-width: 180px;
  border: 2px solid #E74109;
  font-size: 16px;
  color: #E74109;
  font-weight: bold;
  padding:16px;
  border-radius: 4px;
}
.btn04:hover {
  border-style: dashed;
}

.btn04{

display:block;

text-align: center;

max-width: 180px;

border: 2px solid #E74109;

font-size: 16px;

color: #E74109;

font-weight: bold;

padding:16px;

border-radius: 4px;

}

.btn04:hover {

border-style: dashed;

}

背景色を変更する

SAMPLE: Button

<a href="#" class="btn05">Button</a>

1	<a href="#" class="btn05">Button</a>

.btn05 {
  display:block;  
  max-width: 180px;
  background-color: #E74109;
  font-size: 16px;
  color: #FFF;
  font-weight: bold;
  padding:16px;
  text-align: center;
  border-radius: 4px;
  transition: .4s;
}
.btn05:hover {
  background-color: #3F312B;
}