Button Design – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Fri, 04 Jun 2021 12:46:37 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Animated Button with Border Hover Animation using HTML & CSS https://www.codingnepalweb.com/animated-button-with-border-hover-animation/ https://www.codingnepalweb.com/animated-button-with-border-hover-animation/#comments Sat, 22 Aug 2020 06:12:00 +0000 https://codingnepalweb.com/2020/08/22/animated-button-with-border-hover-animation-using-html-css/ Animated Button with Border Hover Animation using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create an Animated Button with Border Hover Animation using only HTML & CSS. Earlier I have shared a blog on how to create a Colorful Gradient Glowing Effect on Buttons using CSS and now I’m going to create a Border Animation on Button.

Button refers to any graphical control element that gives the user an easy way to trigger an event, like searching for a question in a search engine or to associated with dialog boxes, like confirming an action. If the action is to create, edit, delete, or anything else to any piece of information, there is also use a button.

In this program (Button with Border Hover Animation), at first, on the webpage, there is a button with a gradient border and when you hover on it then the border of the button starts to animate, moving, or glowing. When you exit or out your mouse pointer from the button, the border stops animating. This type of border animation on the button you may have seen on the codepen.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Border Hover Animation).

Video Tutorial of Button with Border Hover Animation

 
In the video, you have seen the button hover animation and I hope you have understood the basic codes behind creating this animation. This is a pure CSS program that means I used only HTML & CSS to create this button and their border animation. So if you’re a beginner then you can also create this type of animation with a few lines of CSS codes.

If you like this program (Border Hover Animation) 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 this button on your HTML pages, websites, and projects.

You might like this:

Border Hover Animation on Buttons [Source Codes]

To create this program (Border Hover Animation). 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.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Button Border Animation | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="btn">
      <a href="#"><span>Hover Me</span></a>
    </div>
</body>
</html>

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: 100vh;
  place-items: center;
  background: #000;
}
.btn a{
  position: relative;
  color: #f5f5f5;
  height: 70px;
  width: 220px;
  display: block;
  text-align: center;
  border-radius: 10px;
  text-decoration: none;
  background-image: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
}
.btn a:hover{
  animation: rotate 0.4s linear infinite;
}
@keyframes rotate {
  100%{
    filter: hue-rotate(-360deg)
  }
}
.btn a span{
  height: 88%;
  width: 96%;
  background: #111;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 6px;
  line-height: 62px;
  font-size: 25px;
  transform: translate(-50%, -50%);
}

That’s all, now you’ve successfully created an Animated Button with Border Hover Animation using HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/animated-button-with-border-hover-animation/feed/ 15 Glowing Effects on CSS Buttons using HTML & CSS https://www.codingnepalweb.com/glowing-effects-buttons-html-css/ https://www.codingnepalweb.com/glowing-effects-buttons-html-css/#comments Thu, 14 May 2020 07:52:00 +0000 https://codingnepalweb.com/2020/05/14/glowing-effects-on-css-buttons-using-html-css/ Glowing Effects on CSS Buttons using HTML & CSS
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.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Glowing Button on Hover</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button>Hover Me</button>

  </body>
</html>

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.

]]> https://www.codingnepalweb.com/glowing-effects-buttons-html-css/feed/ 13 Cool Glowing Effect on Buttons using HTML & CSS https://www.codingnepalweb.com/cool-glowing-effect-on-buttons-html-css/ https://www.codingnepalweb.com/cool-glowing-effect-on-buttons-html-css/#comments Mon, 11 May 2020 11:43:00 +0000 https://codingnepalweb.com/2020/05/11/cool-glowing-effect-on-buttons-using-html-css/ Cool Glowing Effect on Buttons using HTML and CSS

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.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Glowing CSS Buttons | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="buttons">
      <button>Hover Me</button>
      <button>Hover Me</button>
    </div>
</body>
</html>

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.

]]> https://www.codingnepalweb.com/cool-glowing-effect-on-buttons-html-css/feed/ 13 Buttons Shining Hover Effect using HTML & CSS https://www.codingnepalweb.com/buttons-shining-hover-effect-html-css/ https://www.codingnepalweb.com/buttons-shining-hover-effect-html-css/#respond Thu, 07 May 2020 08:51:00 +0000 https://codingnepalweb.com/2020/05/07/buttons-shining-hover-effect-using-html-css/ Buttons Shining Hover Effect using HTML & CSS

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.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Button Shining Hover Effect | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div>
      <button>Hover Me</button>
      <button>Hover Me</button>
    </div>
</body>
</html>

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.

]]> https://www.codingnepalweb.com/buttons-shining-hover-effect-html-css/feed/ 0