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