Button Effect using Html css free Source code

Button Effect using Html css

Html :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Button</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="button">

Button

</div>

</body>

</html>

Css :

body{

margin: 0;

padding: 0;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: #000;

}

.button{

position: relative;

color: #f77760;

border: 5px solid #f77760;

width: 250px;

padding: 40px;

font-size: 35px;

text-align: center;

letter-spacing: 15px;

border-radius: 100px;

cursor: pointer;

transition: 2s;

}

.button:hover{

box-shadow: 0 5px 50px #f77760 inset,

0 5px 50px #f77760 inset;

}

ProgGeek