はじめに
社内Wikiに細々とまとめていたものをQiitaへ移行したいと考え、鋭意作業中。
適宜追記予定。
box-shadow
ボックスに影を付ける
影の長さ、ぼかし距離、色を指定できる
<style>
.yes_btn {
margin: 1em 3em;
padding: 3em 5em;
box-sizing:border-box;
height: 50px;
text-align: center;
color: #fff;
border: 2px solid #ffac00;
border-radius: 6px;
background: #ffac00;
/* 水平方向に2px,ぼかし距離4px,黒色透過の影を設定する */
box-shadow: 0 2px 4px rgba(0,0,0,0.16);
font-weight: bold;
cursor: pointer;
}
</style>
<div class="button_area">
<a id="modal_yes" class="yes_btn">はい</a>
</div>
border-radius
角丸をまとめて指定する
値
内容
px, %
ピクセルかパーセントで指定する
<style>
.yes_btn {
margin: 1em 3em;
padding: 3em 5em;
box-sizing:border-box;
height: 50px;
text-align: center;
color: #fff;
border: 2px solid #ffac00;
/* 角丸を6pxで指定する */
border-radius: 6px;
background: #ffac00;
box-shadow: 0 2px 4px rgba(0,0,0,0.16);
font-weight: bold;
cursor: pointer;
}
</style>
<div class="button_area">
<a id="modal_yes" class="yes_btn">はい</a>
</div>
↧