6+ 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.

Move a Square with HTML5 Buttons

Learn how to create a simple interactive feature using HTML5 buttons to move a square across the Screen

Author: w3schools

Preview
Code

<body onload="startGame()">
<script>

var myGamePiece;

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }    
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.newPos();    
    myGamePiece.update();
}

function moveup() {
    myGamePiece.speedY -= 1; 
}

function movedown() {
    myGamePiece.speedY += 1; 
}

function moveleft() {
    myGamePiece.speedX -= 1; 
}

function moveright() {
    myGamePiece.speedX += 1; 
}
</script>
<div style="text-align:center;width:480px;">
  <button onclick="moveup()">UP</button><br><br>
  <button onclick="moveleft()">LEFT</button>
  <button onclick="moveright()">RIGHT</button><br><br>
  <button onclick="movedown()">DOWN</button>
</div>

<p>If you click a button the red square will start moving. Click the same button many times, and it will move faster and faster.</p>
</body>

canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}

```
No need of JavaScript
```

Animated Button

Discover how to create an animated button with a hover effect using HTML and CSS. Learn how to add smooth transitions and interactive styles to enhance user engagement on your website.

Author: Admin

Preview
Code

<h2>Animated Button</h2>

<button class="button"><span>Hover </span></button>

body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }

    .button {
        border-radius: 4px;
        background-color: black;
        border: none;
        color: #FFFFFF;
        text-align: center;
        font-size: 28px;
        padding: 20px;
        width: 200px;
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;
    }

    .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

    .button span:after {
        content: '\00bb';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
    }

    .button:hover span {
        padding-right: 25px;
    }

    .button:hover span:after {
        opacity: 1;
        right: 0;
    }

```
No need of JavaScript
```

Buttons with Colored Hover Effects

Learn how to create buttons with colorful hover effects using simple HTML and CSS. Customize button styles and background colors with smooth transitions for a dynamic user experience.

Author: Admin

Preview
Code

<h1>Buttons with Colored Hover Effects</h1>

    <div class="button-container">
        <button class="button bottom">Button 1</button>
        <button class="button top">Button 2</button>
        <button class="button left">Button 3</button>
        <button class="button right">Button 4</button>
    </div>

body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
            background-color: #f0f0f0;
        }

        h1 {
            margin-bottom: 30px;
        }

        .button-container {
            display: flex;
            justify-content: center;
            gap: 20px; /* Space between buttons */
        }

        .button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            color: black
            cursor: pointer;
            font-size: 16px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            background-color: #ffffff;
            transition: background-color 0.3s;
        }

        /* Hover effects for buttons */
        .button.bottom:hover {
            background-color: yellow;
            color: black;
        }

        .button.top:hover {
            background-color: red;
        }

        .button.left:hover {
            background-color: blue;
        }

        .button.right:hover {
            background-color: green;
        }

```
No need of JavaScript
```

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
```