Home / css / Creative Buttons for website using CSS and FontAwesome

Creative Buttons for website using CSS and FontAwesome

Creative Buttons for website using CSS, Bootstrap and FontAwesome

Buttons are an integral part of any application. Creative buttons can enhance the user experience and give the uniqueness to the website. These buttons are created by Erik using CSS and Font awesome.

LIVE DEMO

 CODE

  • HTML
  • Style.css
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

        <link rel="stylesheet" href="style.css" >
    </head>
<body class="bg">
  
    <div class="container py-5">
        <div class="row">
            <div class="col-md-3 col-sm-6">
                    <div class="col-md-12">
                            <div class="wrapper">  
                                    <div class="pshape firsts"><span class="pshapeb"><i class="fas fa-cog "></i></span></div>
                                    <div class="main first"><span class="pshapeb">Settings</span></div>
                            </div> 
                    </div>
                        
            </div>
            <div class="col-md-3 col-sm-6">
                    <div class="col-md-12">
                            <div class="wrapper">  
                                    <div class="pshape seconds"><span class="pshapeb"><i class="fas fa-home "></i></span></div>
                                    <div class="main second"><span class="pshapeb">Home</span></div>        
                            </div> 
                    </div>
            </div>
          <div class="col-md-3 col-sm-6">
                    <div class="col-md-12">
                            <div class="wrapper">  
                                    <div class="pshape thirds"><span class="pshapeb"><i class="fas fa-share-alt "></i></span></i></div>
                                    <div class="main third"><span class="pshapeb">Share</span></div>        
                            </div> 
                    </div>
            </div>
            <div class="col-md-3 col-sm-6">
                  <div class="col-md-12">
                            <div class="wrapper">  
                                    <div class="pshape fourths"><span class="pshapeb"><i class="fas fa-eye-slash "></i></span></i></div>
                                    <div class="main fourth"><span class="pshapeb">View</span</div>        
                            </div> 
                  </div>
            </div>
       
    </div>
</div>


</body>
</html>

 

body{
    font-family: 'Montserrat';
    font-size: 15px;
    }


.bg {
    background: #012d50;
    background: linear-gradient(45deg, #fff  0%, #e1e7eb  100%);
    background: -moz-linear-gradient(45deg, #fff 0%, #e1e7eb  36a4 100%);
    background: -webkit-linear-gradient(45deg, #fff 0%, #e1e7eb  100%);
    
    color: #fff;
    padding: 35px 0;
}
a{
    text-decoration: none !important;
    color: #fff;
}
.wrapper{
    display: flex;
        
}

.pshape {
  width: 40px;
    height: 50px;
   	transform: skew(-20deg);
    background: #fff;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.pshapeb{
  display:flex;
  transform: skew(20deg);
}

.main{
      
    width: 120px;
    height: 50px;
    transform: skew(-20deg);
    box-shadow: 0 5px 9px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.firsts{
    background:#fff;
    padding: 14px;
    color: #9b5eab;
}
.first{
    background:#9b5eab;
    padding: 14px;
}

.seconds{
    background:#fff;
    padding: 14px;
    color: #49d3a5;
}
.second{
    background:#49d3a5;
   
    padding: 14px;
}
.thirds{
    background:#fff;
    padding: 14px;
    color: #f14d4d;
}

.third{
    background:#f14d4d;
  
    padding: 14px;
}
.fourths{
    background:#fff;
    padding: 14px;
    color: #b5437e;
}
.fourth{
    background:#b5437e;
 
    padding: 14px;
}
@media (min-width: 300px){

.col-sm-6{
    
    margin-top: 5px !important;
}

}

 

Check Also

MaterialDesignRegLoginAnimation

Login & Registration using Materialize CSS with cool animation

Single form for Login & Registration using Materialize css with cool animation Login and Registration …

Leave a Reply

Your email address will not be published. Required fields are marked *