Top 5 stylish buttons with icon in html & css

<html lang="en">
<head>
<title>Stylish Buttons with Icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
 .icon-btn {
 display: inline-block;
 padding: 10px 20px;
 margin: 10px;
 border: 2px solid transparent;
 border-radius: 5px;
 color: #fff;
 text-align: center;
 text-decoration: none;
 cursor: pointer;
 transition: all 0.3s;
 position: relative;
 overflow: hidden;
 }

.icon-btn i {
        margin-right: 10px;
    }

.btn1 {
        background: linear-gradient(to right, #ff416c, #ff4b2b);
    }

.btn2 {
        background: linear-gradient(to right, #00c6ff, #0072ff);
    }

.btn3 {
        background: linear-gradient(to right, #f12711, #f5af19);
    }

.btn4 {
        background: linear-gradient(to right, #4b6cb7, #182848);
    }

.btn5 {
        background: linear-gradient(to right, #fc4a1a, #f7b733);
    }

.icon-btn:hover {
 transform: scale(1.1);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
</style>
</head>
<body>
 <a href="#" class="icon-btn btn1">Like</a>
 <a href="#" class="icon-btn btn2">Comment</a>
 <a href="#" class="icon-btn btn3">Share</a>
 <a href="#" class="icon-btn btn4">Email</a>
 <a href="#" class="icon-btn btn5">Link</a>
</body>
</html>

Top 5 stylish buttons with icon in html & css

You may like these posts :

Write Your Comment