CLIPY BUTTON CREATION USING HTML AND CSS. |CSS|HTML|WEBSITE| https://coo...
HTML And CSS Cooding
July 03, 2022
HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title>CREATE CLIPY BUTTON</title>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<a href="#">BUTTON</a>
</body>
</html>
CSS SOURCE COODING
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #aaffee
}
a
{
position: relative;
padding: 15px 40px;
background: linear-gradient(180deg,red,green,yellow);
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
font-size: 2.2em;
letter-spacing: 2.5px;
transition: 0.5s;
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
a:hover{
background: linear-gradient(180deg,greenyellow,pink,skyblue);
color: red;
letter-spacing: 4px;
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
}
