Tất cả bài viết | Bootstrap

Cách tạo Button cuốn góc bằng Bootstrap và CSS3

Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn Cách tạo Button cuốn góc bằng Bootstrap và CSS3

Bước 1: Tạo cấu trúc HTML

 
  
   
   Cách tạo Button cuốn góc bằng Bootstrap và CSS3 
   
   
     Mua hàng 
    
      Mua hàng 
    
      Mua hàng 
    
     Mua hàng 
    
   
   
      Download 
    
      Download 
    
     Download 
    
     Download 
    
   
   
     Button 
    
     Button 
    
     Button 
    
     Button

Bước 2: Định dạng CSS cho các nút

.pad-15 {	
padding: 15px 0;
}
.btn{    
border-radius: 0;    
border: none;    
text-transform: uppercase;    
position: relative;    
color: #fff;    
transition: all 0.3s ease 0s;
}

.btn:hover{ color: #fff; }

.btn:before{    
content: "";    
width: 0;    
height: 0;    
position: absolute;    
bottom: 0;    
right: 0;    
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);    
transition: all 0.3s ease 0s;
}

.btn:hover:before{    
width: 25px;    
height: 25px;
}

.btn.btn-sm:hover:before{    
width: 17px;    
height: 17px;
}

.btn.btn-xs:hover:before{    
width: 12px;    
height: 12px;
}

.btn.blue{ background: #5bc2d5; }
.btn.blue:before{    
background: 
linear-gradient(315deg, #fff 45%,  #5bc2d5 50%,  #5bc2d5 56%, #fff 80%);
}

.btn.red{ background: #ff3939; }
.btn.red:before{    
background: linear-gradient(315deg, #fff 45%,  #ff3939 50%,  #ff3939 56%, #fff 80%);
}

.btn.green{ background: #35c568; }
.btn.green:before{    background: linear-gradient(315deg, #fff 45%,  #35c568 50%,  #35c568 56%, #fff 80%);
}
.btn.orange{ 
background: #f88030; 
}

.btn.orange:before{    
background: linear-gradient(315deg, #fff 45%,  #f88030 50%,  #f88030 56%, #fff 80%);
}

@media screen and (max-width: 767px){    
.btn{  
margin-bottom: 15px; 
}
}

Bước 3: Gọi thư viện Bootstrap và Font awesome

Bước 4: Gọi thư viện JQUERY

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất