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

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


全方向影付きボタン

<style>
.bt101{
  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: 0px 0px 6px 2px rgba(0,0,0,0.4);
  cursor:pointer;
  border-radius:0px 0px 0px 0px;
  vertical-align:middle;
  user-select: none;
}
.bt101:active{
  box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.4) inset;
}
.bt101:hover{}

.bt102{
  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: 0px 0px 6px 2px rgba(0,0,0,0.4);
  cursor:pointer;
  border-radius:10px 10px 10px 10px;
  vertical-align:middle;
  user-select: none;
}
.bt102:active{
  box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.4) inset;
}
.bt102:hover{}

.bt103{
  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: 0px 0px 6px 2px rgba(0,0,0,0.4);
  cursor:pointer;
  border-radius:50% 50% 50% 50%;
  vertical-align:middle;
  user-select: none;
}
.bt103:active{
  box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.4) inset;
}
.bt103:hover{}
</style>


全方向影付きボタン(色付き)

<style>
.bt111{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:linear-gradient(#FDE, #FBB);
  border:0px none #000;
  text-decoration:none;
  box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.4);
  cursor:pointer;
  border-radius:0px 0px 0px 0px;
  vertical-align:middle;
  user-select: none;
}
.bt111:active{
  box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.4) inset;
  background:linear-gradient(#ECD, #EAA);
}
.bt111:hover{}

.bt112{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:linear-gradient(#FDE, #FBB);
  border:0px none #000;
  text-decoration:none;
  box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.4);
  cursor:pointer;
  border-radius:10px 10px 10px 10px;
  vertical-align:middle;
  user-select: none;
}
.bt112:active{
  box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.4) inset;
  background:linear-gradient(#ECD, #EAA);
}
.bt112:hover{}

.bt113{
  display:inline-block;
  margin:auto;
  padding:1.0em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:linear-gradient(#FDE, #FBB);
  border:0px none #000;
  text-decoration:none;
  box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.4);
  cursor:pointer;
  border-radius:50% 50% 50% 50%;
  vertical-align:middle;
  user-select: none;
}
.bt113:active{
  box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.4) inset;
  background:linear-gradient(#ECD, #EAA);
}
.bt113:hover{}
</style>



丸型SVGボタン

<a class="bt200" target="_blank">
    <svg style="width:32px;" viewBox="0 0 64 64">
      <path d="M22,15 A20,20 0,1,0 42,15" style="fill:none;stroke:#333;stroke-width:8;" />
      <line style="fill:#none;stroke:#333;stroke-width:8;" x1="32" y1="8" x2="32" y2="28" />
    </svg>
</a>

<style>
.bt200{
  display:inline-block;
  margin:0;
  padding:0.2em;
  color:#000;
  text-shadow:1px 1px 2px #999;
  background:linear-gradient(#FFF, #CCC);
  border:0px none #000;
  text-decoration:none;
  box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.4);
  cursor:pointer;
  border-radius:50% 50% 50% 50%;
  vertical-align:middle;
  user-select: none;
}
.bt200:active{
  box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.4) inset;
  background:linear-gradient(#EEE, #BBB);
}
.bt200:hover{
  background:linear-gradient(#FFF, #DDD);
}
</style>



縁なしボタン

<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