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?

Will it Support My theme?

Adding CSS to your theme:

@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;

Creating Button in Post or in Page

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

Conclusion :