HTML Button – CodingNepal

Glowing Effects on CSS Buttons using HTML & CSS

CodingNepal — Thu, 14 May 2020 07:52:00 +0000

Hello readers, Today in this blog you’ll learn how to create CSS Buttons with a Glowing Effect on Hover. Earlier I have shared a Glowing Effect in Social Media Buttons, Now it’s time to create these Glowing Effects in Buttons.

A button is a fundamental UI element that will heavily affect your interaction design of the website between the user. Buttons have the power to compel users to convert, to act.

As you can see in the image, there are two buttons with cool background glowing effect. At first, these buttons are in the initial stage where there are no glowing effects on the background. But when you hover on the specific button then the glowing effect starts. This effect fully based on CSS only.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Glowing Effects on CSS Buttons).

Video Tutorial of Glowing Effect on CSS Buttons

If you like this program (Glowing Effects on CSS Buttons) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use these Glowing buttons on your projects.

If you have basic knowledge of HTML & CSS, you can also create these types of effects on buttons, social media icons, cards, etc. I believe this short video helps a beginner to understand behind creating a glow effect.

Glowing Effect on Button using HTML & CSS [Source Codes]

To create this program (Glowing Effects on CSS Buttons). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




  
    
    Glowing Button on Hover

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url("https://fonts.googleapis.com/css?family=Raleway:300");
*{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  height: 100vh;
  background: black;
  align-items: center;
  justify-content: center;
}
button{
  position: relative;
  height: 60px;
  width: 200px;
  border: none;
  outline: none;
  color: white;
  background: #111;
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
}
button:before{
  position: absolute;
  content: '';
  top: -2px;
  left: -2px;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
  border-radius: 5px;
  z-index: -1;
  opacity: 0;
  filter: blur(5px);
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 400%;
  transition: opacity .3s ease-in-out;
  animation: animate 20s linear infinite;
}
button:hover:before{
  opacity: 1;
}
button:hover:active{
  background: none;
}
button:hover:active:before{
  filter: blur(2px);
}
@keyframes animate {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

That’s all, now you’ve successfully created Glowing Effects on CSS Buttons using HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Cool Glowing Effect on Buttons using HTML & CSS

CodingNepal — Mon, 11 May 2020 11:43:00 +0000

Hello readers, Today in this blog you’ll learn how to create Cool Glowing Effects on Buttons using only HTML & CSS. Previously I have shared how to create a Shining Hover Effect on Buttons using HTML CSS, now it’s time to create a Glowing Effects on CSS Buttons.

CSS buttons refer to styled HTML buttons that developers customize to match their website designs. You can manipulate the colors, text sizes, padding, and even change styling properties when buttons enter different states.

As you can see in the image, there are two buttons with a glowing effect. These buttons are based on only HTML & CSS. Simply, to create this glow effect I moved two or more colors smoothly with some blur effects.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Cool Glowing Effect on Buttons).

Video Tutorial of Cool Glowing Effect on CSS Buttons

I believe you like this program (Cool Glowing Effect on Buttons) and its shining hover effect. If you like this Glow effect on the button and want to get codes of this program. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

If you are a beginner and have some basic knowledge about HTML & CSS then definitely you can also create these types of glowing effects on buttons. You can use these buttons on your websites, projects, and wherever you want.

Glowing Effect on Buttons in HTML & CSS [Source Codes]

To create this program (Cool Glowing Effect on Buttons). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




  
    
    Glowing CSS Buttons | CodingNepal

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
  overflow: hidden;
}
button{
  position: relative;
  height: 60px;
  width: 200px;
  margin: 0 35px;
  border-radius: 50px;
  border: none;
  outline: none;
  background: #111;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.5s;
}
button:first-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
button:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
button:first-child:before,
button:last-child:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
button:first-child:hover:before,
button:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
button:hover{
  z-index: 1;
  animation: glow 8s linear infinite;
}
@keyframes glow {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 400%;
  }
}

That’s all, now you’ve successfully created a Cool Glowing Effect on Buttons using HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Buttons Shining Hover Effect using HTML & CSS

CodingNepal — Thu, 07 May 2020 08:51:00 +0000

Hello readers, Today in this blog you’ll learn how to create Buttons Shining Hover Effect using HTML & CSS. Previously I have shared an Animated Glowing Inputs Login Form in HTML & CSS, now it’s time to create Buttons with Cool Shining Hover Effect using only HTML CSS.

Generally, A button is a fundamental UI element that will heavily affect your interaction design of the website between visitors or users. Buttons have the power to compel users to convert, to act.

As you can see in the image, there are two CSS Buttons. These buttons are really attractive. Basically, at first, these buttons are in the initial stage where there is no shining effect. But when you hover on a specific button, A button background color filled with their border color and a cool shining hover effect sliding from the left side of a button to the right side.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Buttons Shining Hover Effect).

Video Tutorial of Shining Hover Effect on CSS Buttons

I believe you like this button and its shining hover effect. You can easily use this button in your project, sites, and anywhere you want. And you can take this button to the next level with your creativity.

If you like this program (Buttons Shining Hover Effect) and want to get codes of this. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

CSS Buttons with Shining Hover Effect [Source Codes]

To create this program (Buttons Shining Hover Effect). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




  
    
    Button Shining Hover Effect | CodingNepal

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #0d0d0d;
}
button{
  position: relative;
  height: 65px;
  width: 210px;
  margin: 0 40px;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 1px;
  border-radius: 5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
  background: #0d0d0d;
  overflow: hidden;
  transition: 0.6s;
}
button:first-child{
  color: #206592;
  border-color: #206592;
}
button:last-child{
  color: #ce5c0c;
  border-color: #ce5c0c;
}
button:before, button:after{
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  height: 100%;
  filter: blur(30px);
  opacity: 0.4;
  transition: 0.6s;
}
button:before{
  width: 60px;
  background: rgba(255,255,255,0.6);
  transform: translateX(-130px) skewX(-45deg);
}
button:after{
  width: 30px;
  background: rgba(255,255,255,0.6);
  transform: translateX(-130px) skewX(-45deg);
}
button:hover:before,
button:hover:after{
  opacity: 0.6;
  transform: translateX(320px) skewX(-45deg);
}
button:hover{
  color: #f2f2f2;
}
button:hover:first-child{
  background: #206592;
}
button:hover:last-child{
  background: #ce5c0c;
}

That’s all, now you’ve successfully created a Button Shining Hover Effect using HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.