how to make a button on blogger

I learned to modify a button on each article so many ways and models to my liking, but I am more pleased with the results themselves, even though there are so many ways to look perfect and take quite a long time with only a line of self-monitoring codes that make me confused because it doesn't have a programmer's background but I'm happy with the world of programming and coding.

Button Blogger

At least I share a button model display with some additional variations of some code.
1. Model One (without any effect)
 


Script Code:

<button class="button"><b><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;"><i class="fa fa-eye fa-lg"></i>Education Fresh</span></b></button>

2. Second Model (Single Link)



Script Code:

<a href="https://www.educationfresh.com/"><button class="button"><b><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;"><i class="fa fa-eye fa-lg"></i>Education Fresh</span></b></button></a>

3. Third model (New Tab)
   


Script Code

<a href="https://www.educationfresh.com/" target="_blank"><button class="button"><b><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;"><i class="fa fa-eye fa-lg"></i>Education Fresh</span></b></button></a>

Warning: if the css button is missing then copy the following script code 

I add make a submit button or button with CSS effects. And follow the steps as follows:
First you enter the code below, save it directly above </body>

<style> @import url(http://fonts.googleapis.com/css?family=Roboto); /*--------------------------------Button starts--------------------------------*/ .button-container { text-align: center; } .button { position: relative; background: currentColor; border: 1px solid currentColor; font-size: 1.1rem; color: #D81900; margin: 3rem 0; padding: 0.75rem 3rem; cursor: pointer; -webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease; transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease; overflow: hidden; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .button span { color: #fff; position: relative; z-index: 1; } .button::before { content: ''; position: absolute; background: #071017; border: 50vh solid #1d4567; width: 30vh; height: 30vh; border-radius: 50%; display: block; top: 50%; left: 50%; z-index: 0; opacity: 1; -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .button:hover { color: #D81900; box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); } .button:active::before, .button:focus::before { -webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease; transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease; transition: transform 1.12s ease, opacity 0.28s ease 0.364s; transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); opacity: 0; } .button:focus { outline: none; } /*--------------------------------Button ends--------------------------------*/ </style>

Then for you to use the button in your article. You just simply enter the code below then you edit it according to your own needs.

Good Luck.