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 Download | Link Available Below |
| Language Used | HTML & cSS |
| External Link / Dependencies | No |
| Responsive | YES |
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
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
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.
