You are currently viewing 5+ Rainbow Button Using HTML and CSS

5+ Rainbow Button Using HTML and CSS

5+ Rainbow Button Using HTML and CSS

Welcome to the Codewithrandom blog. We learn how to create a Rainbow Style Button Using HTML and CSS. We use Html for creating a baisc structure for buttons and give Rainbow Style Button Using Css.

Html Code For Rainbow Button

<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 the Html code for the Rainbow Button. Now, you can see output without Css, then we write Css Code for Rainbow Style Button.

50+ Html ,Css & Javascript Projects With Source Code

Only Html Code output

Rainbow Button Using HTML and CSS
Rainbow Button Using HTML and CSS

CSS Code For Rainbow Button

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 Rainbow Button Style Button Project.

Final Output Of Rainbow Button Style Using HTML and CSS

Rainbow Button Using HTML and CSS
Rainbow Button Using HTML and CSS

Live Preview Of Rainbow Button Style Html Css


We have completed our Rainbow Style Button.  Here is our updated output with HTML and CSS. Hope you like the Rainbow Button Project. you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

Weather App Using Html,Css And JavaScript 

Thank you!

This post teaches us to create a Rainbow Button Using Html and 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

Leave a Reply