How to Create Flat Beautiful UI Buttons For Blogger | Spider Blogging

Hello Bloggers , Today in this post am going to show how to create Beautiful Flat UI Buttons For Blogger with Floating Effects , Yes if anyone visits your blog then they will surely ask the button codes, In this post I explained step by step about implementing the UI button in your blogger themes. If you own any Download Content Blog or any other which needs a button then you can use this type of buttons in your site. and Also I explained how to customize this button according to your taste.

How to Add these button to your theme?

Its very easy to install these buttons in your blogger theme, You need to follow all my steps which I have mentioned in this Post, Make sure to that you are following directions correctly

Will it Support My theme?

Well, Its based on HTML and Pure CSS , So it will support all the themes including blogger's basic theme, I have tested this theme on most of the themes and it is working fine , So It will surely work on your theme too.

Adding CSS to your theme:

CSS is most important here, Because the buttons are based on PURE CSS, So you should not make any mistake here.

First Sign in to your Blogger Account
Go to Theme Section
Now Click On Edit HTML
Search for the code </b:skin>
Paste the Following code before closing tag

@import url("https://fonts.googleapis.com/css?family=Muli:300,400,700,900");

body {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: #fff;
  height: 100vh;
  font-family: "Muli", Arial, sans-serif;
}
.buttons > button{
  margin-right:30px;
} 
.btn-gradient{
  background:#1462ff;
  color:#fff;
  border-radius: 12px;
  padding:12px 48px;
  box-shadow: 0 6px 30px -10px #4a74c9;
  transition:all 0.5s ease;
  border:0;
  letter-spacing:1px;
  text-transform: uppercase;
}
.btn-gradient:hover{
  box-shadow: 0 0 0 0 rgba(0,40,120,0);
  transform:scale(0.93);
}
.gradient2{
  background-image: linear-gradient(60deg, #4aa5fb 10%, #1ccafa 50%, #00e1f9 100%);
  border-top-left-radius: 20px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 0px;
}
.gradient2:hover{
  border-top-left-radius: 0px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 12px;
}
.gradient3{
  background-image: linear-gradient(60deg, #8c38fe 10%, #b72ee4 50%, #9c66e5 100%);
  border-top-left-radius: 20px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 0px;
}
.gradient3:hover{
  border-top-left-radius: 0px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 12px;

6. After that Click On Save theme.

Creating Button in Post or in Page

Go To a post in which you want to the flat buttons and Just Copy the below code and change the URLs with your URL and Click On Publish / Update.


<div class="buttons">

  <button class="btn btn-gradient gradient2" onclick="window.open('https://moddedguru.com')">Download</button>&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;<button class="btn btn-gradient gradient3" onclick="window.open('https://moddedguru.com')">Demo</button>

Demo

Conclusion :

Using UI friendly button is good for every downloading site , users will love your site and they will visit your site instead of visiting others because of your UI. Thanks

Spider Blogging - The Ultimate Blogging Solution

How to Create Flat Beautiful UI Buttons For Blogger | Spider Blogging

How to Add these button to your theme?

Will it Support My theme?

Adding CSS to your theme:

Creating Button in Post or in Page

Conclusion :

[Updated] How to Install Latest Powerful Anti - Adblock (Adblock Killer) Script For Blogger

How to Create m3u8 Player in Blogger

How to Apply your Site to Google News?

How to Create Flat Beautiful UI Buttons For Blogger | Spider Blogging

How to Add these button to your theme?

Will it Support My theme?

Adding CSS to your theme:

Creating Button in Post or in Page

Conclusion :

1 comment