Post Content Button

This template has a base class btn which sets basic styles like padding and content alignment. By default, btn the control has a transparent border and background color, and doesn't have an explicit focus and hover style.

Class btn intended to be used in combination with variants of button templates, or to serve as the basis for your own custom styles.

If you use the btn class itself, remember to at least define some explicit styling

All button styles look in this blogger template.

Button post style

This template includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.

Button Default
<a class='btn' href='#'>Your Text</a>

Button with Icon

For buttons using icons, you can add some icon code in the Material icons library.

Button Icon
<a class='btn' href='#'>
<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20" fill="currentColor"><path d="M439-82q-76-8-141.5-42.5t-113.5-88Q136-266 108.5-335T81-481q0-155 102.5-268.5T440-880v80q-121 17-200 107.5T161-481q0 121 79 211.5T439-162v80Zm40-198L278-482l57-57 104 104v-245h80v245l103-103 57 58-200 200Zm40 198v-80q43-6 82.5-23t73.5-43l58 58q-47 37-101 59.5T519-82Zm158-652q-35-26-74.5-43T520-800v-80q59 6 113 28.5T733-792l-56 58Zm112 506-56-57q26-34 42-73.5t22-82.5h82q-8 59-30 113.5T789-228Zm8-293q-6-43-22-82.5T733-677l56-57q38 45 61 99.5T879-521h-82Z"/></svg>
Your Text</a>

Learn more about Button https://web.dev/articles/building/a-button-component

Post a Comment