Wednesday, September 19, 2018

Make Simple Blogger Button Class With CSS

    How To Make Simple Blogger Button Class With CSS, Valid Google AMP | CSS tutorial for AMp Blogger

    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

    Please go to the Edit HTML tab on your Blogger theme dashboard.

    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>

    DEMO RED BUTTON

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

    DEMO BLUE BUTTON

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

    DEMO GREEN BUTTON

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

    DEMO GREY BUTTON

    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 :)