【Tips】制作の現場でよく使う！シンプルなボタン

背景

背景ありのシンプルなボタンです。

BUTTON 

<a href="">BUTTON</a>


a {
  background-color: #333;
  color: #fff;
  padding: 15px 60px;
}

背景 角丸

背景ありの角丸のボタンです。

BUTTON 

<a href="">BUTTON</a>


a {
  background-color: #333;
  border-radius: 50px;
  color: #fff;
  padding: 15px 60px;
}

枠線

枠線だけのシンプルなボタンです。

BUTTON 

<a href="">BUTTON</a>


a {
  border: solid 1px #333;
  padding: 16px 72px;
}

太枠線

太い枠線のボタンです。

BUTTON 

<a href="">BUTTON</a>


a {
  border: solid 3px #333;
  padding: 16px 72px;
}

枠線＋矢印①

枠線と矢印を組み合わせたボタンです。

BUTTON 

<a href="">BUTTON</a>


a {
  border: solid 1px #333;
  padding: 16px 20px;
  position: relative;
}
a::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  transform: rotate(45deg);
  position: absolute;
  margin-top: -5px;
  top: 50%;
  right: 20px;
}

枠線＋矢印①＋角丸

枠線と矢印を組み合わせた角丸のボタンです。

BUTTON 

<a href="">BUTTON</a>


a {
  border: solid 1px #333;
  border-radius: 50px;
  padding: 16px 10px 16px 20px;
  text-align: center;
  position: relative;
}
a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  transform: rotate(45deg);
  position: absolute;
  margin-top: -4px;
  top: 50%;
  left: 110px;
}

枠線＋矢印②

枠線と矢印を組み合わせたボタンです。

Button 

<a href="">Button</a>


a {
  border: solid 1px #333;
  padding: 34px 92px 20px 22px;
  position: relative;
}
a::before,
a::after {
  content: "";
  position: absolute;
  top: 42px;
  right: -7px;
  height: 1px;
  background-color: #333;
}
a::before {
  width: 60px;
  transform: translate(30px, 0px);
}
a::after {
  width: 15px;
  transform-origin: right center;
  transform: translate(30px, 0px) rotate(25deg);
}

枠線＋矢印③

枠線と矢印を組み合わせたボタンです。
矢印はsvgで作成しています。

BUTTON 

<a href="">
  <span>BUTTON</span>
  <span class="icon-arrow">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 20">
      <path d="M21.1 1l9.5 9-9.5 9M30.6 10H0" stroke-width="1.5" fill="none" stroke="#333"></path>
    </svg>
  </span>
</a>


a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: solid 1px #333;
  padding: 16px 52px;
}
a .icon-arrow {
  width: 24px;
}

枠線＋ライン①

枠線とラインを組み合わせたボタンです。

BUTTON 

<a href="">BUTTON</a>


a {
  border: solid 1px #333;
  padding: 16px 52px;
  text-align: center;
  position: relative;
}
a::after {
  content: "";
  width: 40px;
  border-top: solid 1px;
  position: absolute;
  right: 0;
  top: 50%;
}

枠線＋ライン②

枠線とラインを組み合わせたボタンです。

Read More 

<a href="">Read More</a>


a {
  border: solid 1px #333;
  padding: 2px 20px;
  margin-left: 65px;
  text-align: center;
  position: relative;
}
a::before {
  content: "";
  width: 60px;
  border-top: solid 1px;
  position: absolute;
  left: -65px;
  top: 50%;
}