CompKit | Buttons

Copy

<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="btn">
    <div class="icon"><i class="fa-regular fa-clipboard" style="color: #00bfff;"></i></div>
    <div class="txt">Copy</div>
</div>

<!-- CSS code -->
.btn {
  border: 1px solid #11738b;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-radius: 6px;
  cursor: pointer;
}

.txt {
  color: #cceeff;
  font-size: 16px;
}

Download

<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="btn">
    <div class="icon"><i class="fa-solid fa-download" style="color: #00e676;"></i></div>
    <div class="txt">Download</div>
</div>

<!-- CSS code -->
.btn {
  border: 2px solid #00994d;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-radius: 8px;
  cursor: pointer;
}

.txt {
  color: #ccffe6;
  font-size: 16px;
}

Print

<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="btn">
    <div class="icon"><i class="fa-solid fa-print" style="color: #40c4ff;"></i></div>
    <div class="txt">Print</div>
</div>

<!-- CSS code -->
.btn {
  border: 1px solid #0091ea;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.txt {
  color: #e0f7ff;
  font-size: 16px;
}

Reset

<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="btn">
    <div class="icon"><i class="fa-solid fa-rotate-right" style="color: #ff1744;"></i></div>
    <div class="txt">Reset</div>
</div>

<!-- CSS code -->
.btn {
  border: 2px solid #cc0000;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-radius: 6px;
  cursor: pointer;
}

.txt {
  color: #ffe6e6;
  font-size: 16px;
}

Refresh

<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="btn">
    <div class="icon"><i class="fa-solid fa-arrows-rotate" style="color: #00b8d4 ;"></i></div>
    <div class="txt">Refresh</div>
</div>

<!-- CSS code -->
.btn {
  border: 2px solid #008c99;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-radius: 6px;
  cursor: pointer;
}

.txt {
  color: #ccf5ff;
  font-size: 16px;
}

Share

<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="btn">
    <div class="icon"><i class="fa-solid fa-arrows-rotate" style="color: #ab47bc;"></i></div>
    <div class="txt">Share</div>
</div>

<!-- CSS code -->
.btn {
  border: 2px solid #8e24aa;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-radius: 7px;
  cursor: pointer;
}

.txt {
  color: #f3e5f5;
  font-size: 16px;
}

Zoom In

<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="btn">
    <div class="icon"><i class="fa-solid fa-magnifying-glass-plus" style="color: #42a5f5 ;"></i></div>
    <div class="txt">Zoom In</div>
</div>

<!-- CSS code -->
.btn {
  border: 2px solid #1565c0;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-radius: 6px;
  cursor: pointer;
}

.txt {
  color: #e3f2fd;
  font-size: 16px;
}

Zoom Out

<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="btn">
    <div class="icon"><i class="fa-solid fa-magnifying-glass-minus" style="color: #42a5f5 ;"></i></div>
    <div class="txt">Zoom Out</div>
</div>

<!-- CSS code -->
.btn {
  border: 2px solid #1565c0;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-radius: 6px;
  cursor: pointer;
}

.txt {
  color: #e3f2fd;
  font-size: 16px;
}

Search

<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="btn">
    <div class="icon"><i class="fa-solid fa-magnifying-glass" style="color: #00bcd4 ;"></i></div>
    <div class="txt">Search</div>
</div>

<!-- CSS code -->
.btn {
  border: 1px solid #0097a7;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-radius: 6px;
  cursor: pointer;
}

.txt {
  color: #ccf9ff;
  font-size: 16px;
}

Delete

<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="btn">
    <div class="icon"><i class="fa-solid fa-trash-can" style="color: #ff1744 ;"></i></div>
    <div class="txt">Delete</div>
</div>

<!-- CSS code -->
.btn {
   border: 1px solid #cc0000;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-radius: 6px;
  cursor: pointer;
}

.txt {
  color: #ffe6e6;
  font-size: 16px;
}