側面が半円になったボタンのデザインはよくあるデザインです。

たまにボタン内のテキストが改行してしまったために半円でなく、ただの角丸ボタンになってしまうことがあります。

今回はJavascriptを使って解決します。

制作したものを確認

See the Pen autoRadius by takblog (@blanks-site) on CodePen.

上記のボタンはvwやvh、％などでpaddingをとったボタンです。

cssではどれもborder-radiusを適用させていませんが、全て側面が半円になったボタンになっています。

javascriptコード

(function(){
  const setAutoRadius = ()=>{
    const autoRadiuses = document.querySelectorAll('.autoRadius');
    if( autoRadiuses.length ){    
      autoRadiuses.forEach(autoRadius=>{
        const radius = Math.ceil(autoRadius.clientHeight*0.5);
        autoRadius.style.borderRadius = radius+'px';
      });
    }
  };
  window.addEventListener('load',()=>{
     setAutoRadius();
  });
  window.addEventListener('resize',()=>{
     setAutoRadius();
  });
})();

側面を半円にしたボタンにするjavascriptです。

上記を読み込んで、半円にしたいボタン要素にclass「autoRadius」を付けてあげます。

autoRadiusを付けた要素は全て側面が半円になります。

注意点としてはインライン要素だとborder-radiusは効かないので、ブロック要素やインラインブロック要素にします。