《cssだけでつくる》ボタン

web

Apr 23, 2018

css備忘録

ボタンのつくりかた

HTML

<a class="button">ポチッと</a>

CSS

.button{
  display: inline-block;
  background-color: rgb(246,200,67);/*背景色*/
  color: #FFF;/*文字色*/
  font-size: 1em;/*文字サイズ*/
  line-height: 2;/*ボタンの縦幅*/
  text-decoration: none;
  letter-spacing: 0.05em;/*字間*/
  padding: 0.2em 1em;/*ボタン内の余白*/
  border-radius: 3px;/*角丸*/
  cursor: pointer;/*カーソルの種類（なくてもいい）*/
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  -webkit-tap-highlight-color: transparent;/*iPhoneタップ時*/
  transition: .3s ease-out;/*変化を緩やかに*/
}

.button:hover{
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);/*すこしだけ浮く*/
}