CLIPY BUTTON CREATION USING HTML AND CSS. |CSS|HTML|WEBSITE| https://coo...

0 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%);

}

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.