ボタンはよく使うものはスタイルを追加して用意しておくと良いと思います（デフォルトはアウトラインのみ）
WPで使う場合、角丸や背景色、文字色はボタンごとに調整できます。ただ、角丸などは全体的なデザインの雰囲気に関わるものなので、可能ならCSSで決める方が良いかと。色や背景色についても、目的によって設計されるべきなのであまり自由に色を変更するのはユーザの混乱を招くかと。
アイコンにはアイコンフォントを使っています。
この記事に追加しているCSS
/* fontawesome */
@import "/wp-content/themes/plain/assets/fontawesome/css/fontawesome.min.css";
@import "/wp-content/themes/plain/assets/fontawesome/css/solid.min.css";
@import "/wp-content/themes/plain/assets/fontawesome/css/regular.min.css";
@import "/wp-content/themes/plain/assets/fontawesome/css/brands.min.css";
/* 基本のボタン */
.el_btn .wp-block-button__link {
--button--border-radius: .1875em;
box-shadow: 0 var(--button--border-width) 0 0 rgba(0,0,0,0.25);
}
.el_btn .wp-block-button__link:active {
box-shadow: none;
transform: translateY( var(--button--border-width) )
}
/* 小さいボタン */
.el_btn__small .wp-block-button__link {
--button--padding-vertical: .25em;
--button--padding-horizontal: 1em;
--button--font-size: .875em;
--button--border-width: 2px;
}
/* アイコン付き */
.el_btn[class*=el_btn__fasBefore] .wp-block-button__link,
.el_btn[class*=el_btn__fasAfte] .wp-block-button__link {
position: relative;
}
.el_btn[class*=el_btn__fasBefore] .wp-block-button__link {
padding-left: calc( var(--button--padding-horizontal) * 2);
}
.el_btn[class*=el_btn__fasAfte] .wp-block-button__link {
padding-right: calc( var(--button--padding-horizontal) * 2);
}
.el_btn[class*=el_btn__fasBefore] .wp-block-button__link::before,
.el_btn[class*=el_btn__fasAfte] .wp-block-button__link::after {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
content: "\f054";/* chevron-right */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.el_btn[class*=el_btn__fasBefore] .wp-block-button__link::before,
.el_btn[class*=el_btn__fasAfte] .wp-block-button__link::after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.el_btn[class*=el_btn__fasBefore] .wp-block-button__link::before {
left: calc( var(--button--padding-horizontal) - 0.5em);
}
.el_btn[class*=el_btn__fasAfte] .wp-block-button__link::after {
right: calc( var(--button--padding-horizontal) - 0.5em);
}
.el_btn.el_btn__fasBeforeBook .wp-block-button__link::before,
.el_btn.el_btn__fasAfterBook .wp-block-button__link::after {
content: "\f518";
}