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 5+ Rainbow Button Using HTML and CSS. We use Html for creating a baisc structure for buttons and give 5+ Rainbow Buttons Using Css.

Code By Natalia
Project DownloadLink Available Below
Language UsedHTML & cSS
External Link / DependenciesNo
ResponsiveYES

Buttons are important part in a website, It allows users to take any action on your website. The more attractive the buttons, the better UI will look. so we need to improve buttons design for better user experience. We have made 5+ rainbow style buttons, which you can use in your project or for learning.

Html Code For Rainbow Button

In this HTML part we have done all these five buttons together. We took the common classnames of all these Rainbow buttons are “Btn” and each button has a unique classname are “Btn–Purple“, “Btn–Green“, “Btn–Red“, “Btn–Blue“, “Btn–Yellow” for adding separate styles in CSS.

let’s look on 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 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

What is button design types?

Buttons are important part in a website, It allows users to take any action on your website. The more attractive the buttons, the better UI will look. so we need to improve buttons design for better user experience. We have made 5+ rainbow style buttons, which you can use in your project or for learning.

How to make Rainbow design buttons?

In this HTML part we have done all these five buttons together. We took the common classnames of all these Rainbow buttons are “Btn” and each button has a unique classname are “Btn–Purple“, “Btn–Green“, “Btn–Red“, “Btn–Blue“, “Btn–Yellow” for adding separate styles in CSS.



Leave a Reply