CSSのdisplayプロパティのinline,block,inline-blockの違い

CSSでボタンを作る(CSSでボタンデザイン)


縁なしボタン

<style>
.bt11{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:0px none #000;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:0px 0px 0px 0px;
  vertical-align:middle;
}
.bt11:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt11:hover{}

.bt12{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:0px none #000;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:10px 10px 10px 10px;
  vertical-align:middle;
}
.bt12:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt12:hover{}

.bt13{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:0px none #000;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:50% 50% 50% 50%;
  vertical-align:middle;
}
.bt13:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt13:hover{}
</style>

縁ありボタン

<style>
.bt21{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:1px solid #777;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:0px 0px 0px 0px;
  vertical-align:middle;
}
.bt21:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt21:hover{}

.bt22{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:1px solid #777;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:10px 10px 10px 10px;
  vertical-align:middle;
}
.bt22:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt22:hover{}

.bt23{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:1px solid #777;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:50% 50% 50% 50%;
  vertical-align:middle;
}
.bt23:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt23:hover{}
</style>

縁あり、点線枠ありボタン

<style>
.bt31{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:1px solid #777;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:0px 0px 0px 0px;
  vertical-align:middle;
  outline:dashed 1px #aaa;
  outline-offset:-0.5em;
}
.bt31:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt31:hover{outline:dashed 1px #ccc;}

.bt32{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:1px solid #777;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:10px 10px 10px 10px;
  vertical-align:middle;
  outline:dashed 1px #aaa;
  outline-offset:-0.5em;
}
.bt32:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt32:hover{outline:dashed 1px #ccc;}

.bt33{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:1px solid #777;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:50% 50% 50% 50%;
  vertical-align:middle;
  outline:dashed 1px #aaa;
  outline-offset:-1.0em;
}
.bt33:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt33:hover{outline:dashed 1px #ccc;}
</style>

縁あり、下点線ありボタン

<style>
.bt41{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:1px solid #777;
  text-decoration:underline dashed #777 1px;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:0px 0px 0px 0px;
  vertical-align:middle;
}
.bt41:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
  text-decoration:underline dashed #aaa 1px;
}
.bt41:hover{text-decoration:underline dashed #ccc 1px;}

.bt42{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:1px solid #777;
  text-decoration:underline dashed #777 1px;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:10px 10px 10px 10px;
  vertical-align:middle;
}
.bt42:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
  text-decoration:underline dashed #aaa 1px;
}
.bt42:hover{text-decoration:underline dashed #ccc 1px;}

.bt43{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:1px solid #777;
  text-decoration:underline dashed #777 1px;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:50% 50% 50% 50%;
  vertical-align:middle;
}
.bt43:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
  text-decoration:underline dashed #aaa 1px;
}
.bt43:hover{text-decoration:underline dashed #ccc 1px;}
</style>

縁あり、グラデーションボタン

<style>
.bt51{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff linear-gradient(180deg,rgba(0,0,0,0.0),rgba(0,0,0,0.2));
  border:1px solid #777;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:0px 0px 0px 0px;
  vertical-align:middle;
}
.bt51:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt51:hover{}

.bt52{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-decoration:none;
  background:#fff linear-gradient(180deg,rgba(0,0,0,0.0),rgba(0,0,0,0.2));
  border:1px solid #777;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:10px 10px 10px 10px;
  vertical-align:middle;
}
.bt52:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt52:hover{}

.bt53{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff linear-gradient(180deg,rgba(0,0,0,0.0),rgba(0,0,0,0.2));
  border:1px solid #777;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:50% 50% 50% 50%;
  vertical-align:middle;
}
.bt53:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt53:hover{}
</style>

縁あり、円形グラデーションボタン

<style>
.bt61{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff radial-gradient(circle,rgba(0,0,0, 0.0),rgba(0,0,0, 0.2));
  border:1px solid #777;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:0px 0px 0px 0px;
  vertical-align:middle;
}
.bt61:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt61:hover{}

.bt62{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-decoration:none;
  background:#fff radial-gradient(circle,rgba(0,0,0, 0.0),rgba(0,0,0, 0.2));
  border:1px solid #777;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:10px 10px 10px 10px;
  vertical-align:middle;
}
.bt62:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt62:hover{}

.bt63{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff radial-gradient(circle,rgba(0,0,0, 0.0),rgba(0,0,0, 0.2));
  border:1px solid #777;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:50% 50% 50% 50%;
  vertical-align:middle;
}
.bt63:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt63:hover{}
</style>

縦文字ボタン

<style>
.bt71{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:0px none #000;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:0px 0px 0px 0px;
  vertical-align:middle;
  writing-mode:vertical-lr;
}
.bt71:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt71:hover{}

.bt72{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:0px none #000;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:10px 10px 10px 10px;
  vertical-align:middle;
  writing-mode:vertical-lr;
}
.bt72:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt72:hover{}

.bt73{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:#fff;
  border:0px none #000;
  text-decoration:none;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
  cursor:pointer;
  border-radius:50% 50% 50% 50%;
  vertical-align:middle;
  writing-mode:vertical-lr;
}
.bt73:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
}
.bt73:hover{}
</style>

色を付けた場合



Mam's WebSite