5+ Button Html Css | Rainbow Button Style Animations Code

Table of Contents

5+ Button Html Css | Rainbow Button Style Animations Code

Welcome to Code With Random blog. We learn how to create a Button Html Css. We use HTML & CSS  for Button Html Css. Hope you enjoy our blog so let’s start with a basic HTML structure for the Button Html Css.

Html Code 

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>button Html Css</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <button type="button" class="btn btn--purple">
        <span class="btn__txt">Purple button</span>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
    </button>
    
    <button type="button" class="btn btn--green">
        <span class="btn__txt">Green button</span>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
    </button>
    
    <button type="button" class="btn btn--red">
        <span class="btn__txt">Red button</span>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
    </button>
    
    <button type="button" class="btn btn--blue">
        <span class="btn__txt">Blue button</span>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
    </button>
    
    
    <button type="button" class="btn btn--yellow">
        <span class="btn__txt">Yellow button</span>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
        <i class="btn__bg" aria-hidden="true"></i>
    </button>
    
</body>


</html>

There is all HTML code for the Button Html Css. Now, you can see output without CSS, then we write CSS for the Button Html Css.

Output

Button Html Css

CSS Code 

html, body {
  height: 100%;
}
body {
  display: grid;
  place-content: center;
}
.btn {
  background: hsl(var(--hue), 98%, 80%);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  color: black;
  font: 600 1.05rem/1 "Nunito", sans-serif;
  letter-spacing: 0.05em;
  overflow: hidden;
  padding: 1.15em 3.5em;
  min-height: 3.3em;
  position: relative;
  text-transform: lowercase;
}
.btn--yellow {
  --hue: 46;
}
.btn--green {
  --hue: 163;
}
.btn--purple {
  --hue: 244;
}
.btn--red {
  --hue: 0;
}
.btn--blue {
  --hue: 210;
}
.btn:active, .btn:focus {
  outline: 3px solid hsl(calc(var(--hue) + 90), 98%, 80%);
}
.btn + .btn {
  margin-top: 2.5em;
}
.btn__txt {
  position: relative;
  z-index: 2;
}
.btn__bg {
  background: hsl(var(--hueBg), 98%, 80%);
  border-radius: 50%;
  display: block;
  height: 0;
  left: 50%;
  margin: -50% 0 0 -50%;
  padding-top: 100%;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: scale(0);
  transform-origin: 50% 50%;
  transition: transform 0.2s cubic-bezier(0.5, 1, 0.89, 1);
  z-index: 1;
}
.btn__bg:nth-of-type(1) {
  --hueBg: calc(var(--hue) - 90);
  transition-delay: 0.1875s;
}
.btn__bg:nth-of-type(2) {
  --hueBg: calc(var(--hue) - 180);
  transition-delay: 0.125s;
}
.btn__bg:nth-of-type(3) {
  --hueBg: calc(var(--hue) - 270);
  transition-delay: 0.0625s;
}
.btn__bg:nth-of-type(4) {
  --hueBg: calc(var(--hue) - 360);
  transition-delay: 0s;
}
.btn:hover .btn__bg, .btn:focus .btn__bg, .btn:active .btn__bg {
  transform: scale(1.5);
  transition: transform 0.4s cubic-bezier(0.11, 0, 0.5, 0);
}
.btn:hover .btn__bg:nth-of-type(1), .btn:focus .btn__bg:nth-of-type(1), .btn:active .btn__bg:nth-of-type(1) {
  transition-delay: 0.125s;
}
.btn:hover .btn__bg:nth-of-type(2), .btn:focus .btn__bg:nth-of-type(2), .btn:active .btn__bg:nth-of-type(2) {
  transition-delay: 0.25s;
}
.btn:hover .btn__bg:nth-of-type(3), .btn:focus .btn__bg:nth-of-type(3), .btn:active .btn__bg:nth-of-type(3) {
  transition-delay: 0.375s;
}
.btn:hover .btn__bg:nth-of-type(4), .btn:focus .btn__bg:nth-of-type(4), .btn:active .btn__bg:nth-of-type(4) {
  transition-delay: 0.5s;
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

Button Css code

We have completed our CSS section,  Here is our updated output with CSS. Hope you like the Button Html Css, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

This post teaches us to create a Button Html Css using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

code by – Natalia

Check out more…..

1.Html And Css Projects With Source Code

2. Add To Cart Button Html

3. Notes App Using Html Css Javascript

Share on:

Leave a Comment