How to make Button Long Shadow Using HTML CSS

Hello, Viewer. In this article I will teach you how to create a button long shadow. you have already read multiple articles creating for long shadow button but this article is totally different to other article because I will create button long shadow only used for html CSS. you have reads lots of article but they have created long shadow in help of JavaScript.­so let’s start practical first step you create a button in your html document that example show in below code you can also copy the below code.

How to Make a Responsive Navbar Using HTML CSS Only

why we are use button shadow?

Button shadow is not necessary but if we give a button shadow then our button looks good. User are attract in our design. Button shadow is enhancing our design looks. In lots of cases we need button shadow for enhance design looks. May be you notice lots of website in internet they have created many different types of shadow in button.

How to create the Resume CV design using HTML and CSS — Resume Design — CV Design

HTML Code

<!DOCTYPE html>
<html>
<head>
	<title>Button Long Shadow</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<button>Button</button>

</body>
</html>

Now second step copy the CSS code in below first thing also check your CSS file link in html head tag inside. if CSS link is properly set then you see the final output

CSS Code

body {
  display:grid;
  grid-auto-flow:column;
  grid-gap:80px;
  place-content:center;
  margin:0;
  height:100vh;
  background: #2ec6f7;
}
button {
  --border: 5px;    
  --color: #8989893b; 
  font-size: 35px;
  padding: 10px 45px;
  cursor: pointer;
  border: none;
  color: #fff;
  box-shadow: 
    0 0 0 200px inset #26a1ca,
    0 0 0 var(--border) inset white;
  position: relative;
  border: 2px solid white;
}
button:before,
button:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(0 0,100% 0,calc(100% + 200vmax) 200vmax,200vmax 
    calc(100% + 200vmax),0 100%);
  box-shadow: 0 0 0 200vmax var(--color);
  filter: brightness(1.1);
}
button:after {
  inset: 0 0 0 auto;
  filter: brightness(0.9);
}

Watch a video tutorial how to create a button long shadow using html CSS only

Leave a Reply

Your email address will not be published. Required fields are marked *