Make Simple Blogger Button Class With CSS

Bootstrap is one of the most widely used website frameworks for developers. Bootstrap really helps the work of a website developer. Simply call the selector class that is available in bootstrap, then the element can be displayed, without the hassle of creating your own CSS selector.

For example, when I want to make a Button for the buy button, I just call the HTML code below.

  <button type="button" class="btn btn-primary">BUY</button>

No need to create the CSS for .btn and .btn-primary, because I've been using Bootstrap component on my blog

But unfortunately, if you use the blogger AMP template, installing the Bootstrap framework on your template will make your template invalid AMP.

That's why this time I will share a tutorial on making a simple Button using CSS, and how to apply it to Blogger.

How To Make Button Style With CSS Only

Put the following CSS code to the blog between <b:skin> ...]]</b:skin> for the non-AMP blog and for AMP template are between the <style amp-custom>.

.btn {



    padding: 15px 0 17px;

    line-height: 1.2em;

    color: #fff; background:#009688; 

    font-weight: 700;

    font-size: 17px;

    letter-spacing: 1px;

    display: block;

    width: 75%; /* set button width here */
    margin: 5px auto 10px;

    text-align: center;

    border-radius: 5px;

    cursor: pointer;

    transition: all .3s

}

.btn.red {background: red} .btn.red:hover {background: #8b0000;color: #fff}

.btn.blue {background: blue} .btn.blue:hover {background: #00008b;color: #fff}

.btn.green {background: green} .btn.green:hover {background: #006400; color: #fff}

.btn.grey { background: grey}.btn.grey:hover {background: darkgrey; color: #fff}

The next step is calling the .btn Selector to display the Button. You just simply copy the HTML code below and place the code where you want it.

<div class="btn red">Text</div>

<div class="btn blue">Text</div>

<div class="btn green">Text</div>

<div class="btn grey">Text</div>

Read More: Adding Gradient Color in Blogger Menu Navigation (CSS)

Other Color
If you want another color, just replace the background row with the hex code that you want. Example use {background: #000} to change the button to black.

Using this Class Button is highly recommended for those of you who have a Download Blog, or Blogging Tutorial.

Hopefully useful :)