3+ Button Components - Vanilla CSS

Buttons are interactive elements used on websites to trigger actions or navigate to different pages or sections. They typically appear as clickable areas with text or icons that prompt users to perform a specific action, such as submitting a form, accessing a link, or initiating a process. In this collection, you'll find a variety of designs for button components that you can easily incorporate into your website's design. Whether you need basic buttons or more visually appealing styles, these components are designed to improve user interaction and provide a seamless browsing experience for your website visitors.

Animated Loading Button

Enhance user interaction on your website with an animated loading button. Learn how to implement a button that provides visual feedback during loading processes.

Author: Joe

Preview
Code

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />


<button class="loading">
  <span class="material-symbols-outlined"> refresh </span>
  <p>Reloading</p>
</button>

:root {
  --color-light: #79efff;
  --color-dark: #71e0ef;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: #1c1e1f;
  display: grid;
  place-items: center;
}

button {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 64px;
  padding: 0 38px 0 30px;
  border: 0;
  border-radius: 32px;
  font-size: 18px;
  font-weight: 500;
  background: var(--color-light);
  color: #0e1e25;
}

@keyframes loading {
  0% {
    transform: translateX(25px);
  }
  100% {
    transform: translateX(-30px);
  }
}

@keyframes spin {
  100% {
    rotate: 1turn;
  }
}

button > :is(span, p) {
  position: relative;
  z-index: 3;
}

button::before,
button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.25s;
}

button::before {
  z-index: 1;
  background: var(--color-light)
    repeating-linear-gradient(
      50deg,
      transparent,
      transparent 10px,
      var(--color-dark) 10px,
      var(--color-dark) 20px
    );
}

button::after {
  z-index: 2;
  background: linear-gradient(var(--color-light) 30%, transparent 100%);
}

button::after {
  z-index: 2;
}

button.loading:hover::before,
button.loading:hover span {
  animation-play-state: paused;
}

button.loading::before,
button.loading::after {
  opacity: 1;
}

button.loading::before {
  animation: loading 0.6s infinite linear;
}

button.loading span {
  animation: spin 0.6s infinite linear;
}

```
No need of JavaScript
```

Share Button with Social Icons

Increase user engagement on your website with a share button adorned with social icons. Learn how to implement a button that allows users to easily share content across various social media platforms.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>



<button class="button">
  <span class="button-text">
    <span> Share </span>
    <i class="fa-solid fa-share-nodes"></i>
  </span>
  <span class="button-links">
    <a>
      <i class="fa-brands fa-twitter"></i>
    </a>
    <a>
      <i class="fa-brands fa-facebook"></i>
    </a>
    <a>
      <i class="fa-brands fa-linkedin"></i>
    </a>
  </span>
</button>

html,
body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #f8faff;
}

.button {
  position: relative;
  overflow: hidden;
  width: 140px;
  height: 50px;
  border-radius: 25px;
  border: 0;
  color: #f7f7f7;
  background: #275efe;
  font-family: "Euclid Circular A", "Poppins";
  cursor: pointer;
  transition: 0.2s;
}

.button i {
  font-size: 18px;
}

.button-text,
.button-links {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}

.button-text {
  gap: 10px;
  justify-content: center;
  color: inherit;
  font-size: 16px;
}

.button-links {
  opacity: 0;
  justify-content: space-between;
  padding: 0 28px;
  transition: 0.2s;
}

.button-links a {
  translate: 0 50px;
  transition: 0.3s;
}

.button:hover {
  border-radius: 6px;
}

.button:hover .button-links a:nth-child(1) {
  transition-delay: 0.05s;
}

.button:hover .button-links a:nth-child(2) {
  transition-delay: 0.1s;
}

.button:hover .button-links a:nth-child(3) {
  transition-delay: 0.15s;
}

.button:hover .button-text {
  translate: 0 -100%;
}

.button:hover .button-links {
  opacity: 1;
}

.button:hover .button-links a {
  translate: 0;
}

.button-links i {
  color: #f7f7f7;
}

```
No need of JavaScript
```

Animated Delete Button

Elevate user interaction on your website with an animated delete button. Learn how to implement a button that enhances the user experience through smooth animations and transitions.

Author: Joe

Preview
Code

<button>
  <span class="button-text"></span>
  <span class="animation">
    <span class="paper-wrapper">
      <span class="paper"></span>
    </span>
    <span class="shredded-wrapper">
      <span class="shredded"></span>
    </span>
    <span class="lid"></span>
    <span class="can">
      <span class="filler"></span>
    </span>
  </span>
</button>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  background: #111111;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 0;
  background: #ff2c6c;
  font-size: 22px;
  font-weight: 400;
  font-family: "Euclid Circular A";
  color: #f9f9f9;
  padding: 0 0 0 24px;
  width: 210px;
  height: 64px;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}

.button-text {
  flex: 0 0 120px;
}

.button-text::before {
  content: "Delete User";
}

.animation {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  scale: 1;
}

.can {
  overflow: hidden;
  position: relative;
  translate: 0 3px;
  width: 20px;
  height: 22px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 2px solid #ffffff;
}

.lid {
  position: absolute;
  top: 20px;
  left: 50%;
  translate: -50% 0;
  width: 22px;
  height: 2px;
  background: #ffffff;
}

@keyframes move {
  75%,
  100% {
    translate: 0 88px;
  }
}

.paper-wrapper,
.shredded-wrapper {
  overflow: hidden;
  position: absolute;
  display: flex;
  top: -20px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 64px;
}

.paper-wrapper {
  height: 40px;
}

.shredded-wrapper {
  top: 24px;
  height: 20px;
  justify-content: center;
}

.paper,
.shredded {
  display: block;
  background: #ffffff;
  height: 20px;
}

.paper {
  width: 10px;
}

.shredded {
  margin-top: -40px;
  width: 2px;
}

.shredded::before,
.shredded::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  width: inherit;
  height: inherit;
  background: inherit;
}

.shredded::before {
  left: -4px;
}

.shredded::after {
  right: -4px;
}

@keyframes fill {
  0%,
  20% {
    translate: 0 0;
  }
  40%,
  70% {
    translate: 0 -50%;
  }
  90%,
  100% {
    translate: 0 -100%;
  }
}

.filler {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -32px;
  width: 64px;
  height: 120%;
  background: #ffffff;
}

button:active {
  opacity: 0.75;
}

button:active .button-text::before {
  content: "Deleting ...";
}

button:active :is(.paper, .shredded) {
  animation: move 1.25s linear 2 both;
}

button:active .filler {
  animation: fill 2.5s both;
}

```
No need of JavaScript
```

Simple Button

Elevate your website's appearance with simple buttons using HTML and CSS. Learn how to effortlessly create and customize buttons to enhance user experience and engagement.

Author: Admin

Preview
Code

```
<button>Click Me</button>
```

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

```
No need of JavaScript
```