Paid-by-themewiki.top
zonyone1 code

Trang chủ  ›  Blog  ›  blospot  ›  code  ›  thủ thuật

[Button css #01] Nút bấm đẹp cho người yêu thích website

a la/s Đăng nhận xét
Tổng hợp những nút bấm CSS đẹp nhất hành tinh cho các member zonyone
Mỗi đối tượng xem trước có BOX CODE ngay phía dưới tiêu đề
Hãy sao chép các đoạn mã tương ứng theo thứ tự TIÊU ĐỀ --> ĐỐI TƯỢNG --> BOX CODE

Font-awesome icons demo





<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
<div class="container">
<h3>Font-awesome icons</h3>
<button type="button" class="btn btn-primary"><i class="fa fa-times" aria-hidden="true"></i>  Remove it</button>
<button type="button" class="btn btn-success"><i class="fa fa-binoculars" aria-hidden="true"></i>  Binoculars</button>
<button type="button" class="btn btn-info"><i class="fa fa-cart-plus" aria-hidden="true"></i>  Add to cart</button>
<button type="button" class="btn btn-warning"><i class="fa fa-calendar" aria-hidden="true"></i>  Calendar</button><br /><br />
<button type="button" class="btn btn-light"><i class="fa fa-trash" aria-hidden="true"></i>  Delete</button>
<button type="button" class="btn btn-outline-success"><i class="fa fa-wifi" aria-hidden="true"></i>  Wifi</button>
<button type="button" class="btn btn-dark"><i class="fa fa-upload" aria-hidden="true"></i>  Upload</button>
<button type="button" class="btn btn-outline-success"><i class="fa fa-download" aria-hidden="true"></i>  Download</button>
</div>
</body>
</html>

A demo of Iconic icons in Bootstrap 4

Using with text 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.0/font/css/open-iconic-bootstrap.min.css" />

</head>
<body>
<div class="container">
<h3>A demo of Iconic icons in Bootstrap 4</h3>
  <div class="row">
    <div class="col-sm-6">
     <button type="button" class="btn btn-outline-primary">Download File <span class="oi oi-data-transfer-download"></span></button>
     <button type="button" class="btn btn-outline-secondary"><span class="oi oi-data-transfer-upload"></span> Upload File</button>
    </div>
    <div class="col-sm-5 bg-info text-light">
    <span class="oi oi-double-quote-serif-left"></span>
    Using with text
    <span class="oi oi-double-quote-serif-right"></span> 
    </div>
  </div>

</div>  
</body>
</html>


Nút bấm trung bình CSS bootstrap 4


Large size

Normal size

Small size


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.0/font/css/open-iconic-bootstrap.min.css" />

</head>
<body>
<div class="container">
  <div class="row">
    <div class="col">
    <h3>Large size</h3>
     <button type="button" class="btn btn-success btn-lg">Download File <span class="oi oi-data-transfer-download"></span></button>
     <button type="button" class="btn btn-info btn-lg"><span class="oi oi-data-transfer-upload iconic-lg"></span> Upload File</button>
    </div>
  </div>

  <div class="row">
    <div class="col">
    <h3>Normal size</h3>
     <button type="button" class="btn btn-success">Download File <span class="oi oi-data-transfer-download"></span></button>
     <button type="button" class="btn btn-info"><span class="oi oi-data-transfer-upload iconic-lg"></span> Upload File</button>
    </div>
  </div>

  <div class="row">
    <div class="col">
    <h3>Small size</h3>
     <button type="button" class="btn btn-danger btn-sm">Emails <span class="oi oi-envelope-closed"></span></button>
     <button type="button" class="btn btn-warning btn-sm"><span class="oi oi-delete"></span> Delete Me</button>
    </div>
  </div>  

</div>  
</body>
</html>

Demo of Material Icons

Large size

Normal size

Small size


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

</head>
<body>
<div class="container">
<h3>Demo of Material Icons</h3>
  <div class="row">
    <div class="col">
    <h3>Large size</h3>
     <button type="button" class="btn btn-primary btn-lg">Camera <i class="material-icons">camera_enhance</i></button>
     <button type="button" class="btn btn-secondary btn-lg">Search <i class="material-icons">search</i></button>
    </div>
  </div>

  <div class="row">
    <div class="col">
    <h3>Normal size</h3>
     <button type="button" class="btn btn-outline-success">Date Range <i class="material-icons">date_range</i></button>
     <button type="button" class="btn btn-outline-info">Finger Print <i class="material-icons">fingerprint</i></button>
    </div>
  </div>

  <div class="row">
    <div class="col">
    <h3>Small size</h3>
     <button type="button" class="btn btn-info btn-sm">Backup <i class="material-icons">backup</i></button>
     <button type="button" class="btn btn-danger btn-sm"><i class="material-icons">3d_rotation</i> 3D icon</button>
    </div>
  </div>  

</div> 
</body>
</html>

Icon with link


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

</head>
<body>
<div class="container">
<h3>Icon with link</h3>
  <div class="row">
    <div class="col">
    <div><a href="https://www.zonyone.com/" class="text-primary">Class Name: text-primary<i class="material-icons">launch</i></a></div>
    </div>
  </div>

</div> 
</body>
</html>


Demo of ionicons

4 icons in small buttons

Normal size

In a link

Call Us 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"> 

</head>
<body>
<div class="container">
<h3>Demo of ionicons</h3>
  <div class="row">
    <div class="col">
    <h3>4 icons in small buttons</h3>
     <button type="button" class="btn btn-primary btn-sm"><span class="ion-ios-skipbackward"></span></button>
     <button type="button" class="btn btn-primary btn-sm"><span class="ion-ios-pause"></span></button>
     <button type="button" class="btn btn-primary btn-sm"><span class="ion-ios-play"></span></button>
     <button type="button" class="btn btn-primary btn-sm"><span class="ion-ios-skipforward"></span></button>               
 
    </div>
  </div>

  <div class="row">
    <div class="col">
    <h3>Normal size</h3>
     <button type="button" class="btn btn-success">Trash <span class="ion-ios-trash"></span></button>
     <button type="button" class="btn btn-outline-info">Price Tag <span class="ion-pricetag"></span></button>
    </div>
  </div>

  <div class="row">
    <div class="col">
    <h3>In a link</h3>
    <a href="https://www.jquery-az.com" class="text-primary">Call Us <span class="ion-ios-telephone"></span></a>
    </div>
  </div>  

</div> 
</body>
</html>


Font-awesome Social icons




&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css&quot; integrity=&quot;sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;h3&gt;Font-awesome Social icons&lt;/h3&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary btn-sm&quot;&gt;&lt;i class=&quot;fa fa-facebook-square&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;  &lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-info btn-sm&quot;&gt;&lt;i class=&quot;fa fa-twitter&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;  &lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light btn-sm&quot;&gt;&lt;i class=&quot;fa fa-google-plus-official&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt; &lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-success btn-sm&quot;&gt;&lt;i class=&quot;fa fa-linkedin-square&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;  &lt;/button&gt;&lt;br /&gt;&lt;br /&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-danger btn-sm&quot;&gt;&lt;i class=&quot;fa fa-flickr&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;  &lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-dark btn-sm&quot;&gt;&lt;i class=&quot;fa fa-tumblr&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;  &lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger btn-sm&quot;&gt;&lt;i class=&quot;fa fa-youtube&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;  &lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-success btn-sm&quot;&gt;&lt;i class=&quot;fa fa-whatsapp&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;  &lt;/button&gt;


&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


Demo of Feather Icons




<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script> 

</head>
<body>
<div class="container">
<h3>Demo of Feather Icons</h3>

<button type="button" class="btn btn-primary"><i data-feather="linkedin"></i>  Linkedin</button>
<button type="button" class="btn btn-success"><i data-feather="twitter"></i>  Twitter</button>
<button type="button" class="btn btn-info"><i data-feather="facebook"></i>  Facebook</button>
<button type="button" class="btn btn-warning"><i data-feather="command"></i>  Command</button><br /><br />
<button type="button" class="btn btn-light"><i data-feather="cloud-drizzle"></i>  Cloud Drizzle</button>
<button type="button" class="btn btn-outline-success"><i data-feather="calendar"></i>  Calendar</button>
<button type="button" class="btn btn-dark"><i data-feather="bar-chart-2"></i>  Bar Chart</button>
<button type="button" class="btn btn-outline-success"><i data-feather="activity"></i>  Activity</button>

</div> 

<script>
  feather.replace()
</script>
</body>
</html>


Blog blospot code thủ thuật
ZONY NGUYỄN
ZONY NGUYỄN
Tôi yêu thích công nghệ thông tin, và tôi muốn hỗ trợ bạn trong những lĩnh vực tôi biết, đồng hành cùng zony là chương trình kết nối giữa tôi và những người bạn
SHARE WhatsApp

Related Posts

Đăng nhận xét

Đăng nhận xét