Hello wizards, Today in this blog you’ll learn how to create the Simple Buttons (part-4) using HTML & CSS only. Earlier I have shared a blog on Simple Buttons (part -1, 2 & 3) and now its time to create a Simple Buttons (part-4)
In the video, you’ve seen "How to design the Simple Buttons (part-4)" . As you know, this is a pure CSS program that means only HTML & CSS are used to create this button.
SOURCE CODE
To create this Simple Buttons (part-4) . First, you need to create one file for HTML code and CSS code is internally added in HTML file. After creating the file just paste the following codes in your file. Remember, you’ve to create a file with .html extension.
You can also download source code file from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button-4</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: skyblue;
}
.btn {
width: 200px;
height: 200px;
font-size: 32px;
border: 3px solid black;
text-transform: uppercase;
letter-spacing: 3px;
border-radius: 25%;
background-color: transparent;
position: relative;
cursor: pointer;
}
.btn::before,
.btn::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: -3px;
left: -3px;
border-radius: 25%;
border: 3px solid black;
transition: all 0.5s ease-in-out;
}
button:hover::before {
transform: rotate(30deg);
}
button:hover::after {
transform: rotate(60deg);
}
</style>
<body>
<button class="btn">button</button>
</body>
</html>
Generating Download Link...