
側面が半円になったボタンのデザインはよくあるデザインです。
たまにボタン内のテキストが改行してしまったために半円でなく、ただの角丸ボタンになってしまうことがあります。
今回は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は効かないので、ブロック要素やインラインブロック要素にします。