Create Button Decoration Using HTML And CSS

How TO Cook?

Lorem crambled it to make a type conditions ang specimen book.



PIZZA


ICE CREAM

HOTDOG


BURGER

EGG


CHEESE

CARROT


SEA FISH

Its features:

  • You can add a link to the name of button.

  • You can use different types of icons inside the button according to your needs.

  • It is completly responsive.

  • You can change the model color via CSS if you want.

Try to create like yourself by following the codes below :


Step 1) Add to head :
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src='https://kit.fontawesome.com/a076d05399.js'></script>
Step 2) Add to html :
<h1 style="text-align:center;">How TO Cook?</h1> <p style="text-align:center;"> Lorem crambled it to make a type conditions ang specimen book. </p> <br><br> <div style="text-align:center"> <a href="#abcd"> <span class="dot"> <i class='fas fa-pizza-slice' style='font-size:40px;color:white'></i> <p>PIZZA</p> </span><br> </a> <a href="#abcd"> <span class="dot"> <i class='fas fa-ice-cream' style='font-size:40px;color:white'></i> <p>ICE CREAM</p> </span> </a> <a href="#abcd"> <span class="dot"> <i class='fas fa-hotdog' style='font-size:40px;color:white'></i> <p>HOTDOG</p> </span><br> </a> <a href="#abcd"> <span class="dot"> <i class='fas fa-hamburger' style='font-size:40px;color:white'></i> <p>BURGER</p> </span> </a> <a href="#abcd"> <span class="dot"> <i class='fas fa-egg' style='font-size:40px;color:white'></i> <p>EGG</p> </span><br> </a> <a href="#abcd"> <span class="dot"> <i class='fas fa-cheese' style='font-size:40px;color:white'></i> <p>CHEESE</p> </span> </a> <a href="#abcd"> <span class="dot"> <i class='fas fa-carrot' style='font-size:40px;color:white'></i> <p>CARROT</p> </span><br> </a> <a href="#abcd"> <span class="dot"> <i class='fas fa-fish' style='font-size:40px;color:white'></i> <p>SEA FISH</p> </span> </a> </div>
Step 3) Add to css :
.dot { height: 125px; width: 125px; background-image:linear-gradient(#c30034, #f65326, #c30034); border-radius: 50%; display: inline-block; } .dot i{ margin-top:20px; } .dot p{ color:white; font-weight:600; } .dot:hover{ background-image:linear-gradient(#218721, #0cb506, #218721); }



Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.