Imperfect Buttons

Developer
Tiffany Rayside
Size
3,184 Kb
Views
64,768
  1. Imperfect Buttons Previews
  2. Imperfect Buttons HTML Codes
  3. Imperfect Buttons CSS Codes

How do I make an imperfect buttons?

"Hand-Drawn" border effect on buttons w/CSS border-radius FYI: There is a bug when rendering the dotted / dashed borders in FF. Rendering solid borders in FF is fine. . What is a imperfect buttons? How do you make a imperfect buttons? This script and codes were developed by Tiffany Rayside on 13 June 2022, Monday.

Imperfect Buttons Previews
IQ Test

Imperfect Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Imperfect Buttons</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Hand-Drawn Border Buttons</h1>
<section> <button class='lined thick'>Lined Thick</button> <button class='dotted thick'>Dotted Thick</button> <button class='dashed thick'>Dashed Thick</button>
</section>
<section> <button class='lined thin'>Lined Thin</button> <button class='dotted thin'>Dotted Thin</button> <button class='dashed thin'>Dashed Thin</button>
</section>
</body>
</html>

Imperfect Buttons - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Patrick+Hand+SC);
* { box-sizing: border-box;
}
html, body { width: 100%; min-height: 100%; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #F0F0D8; font-family: 'Patrick Hand SC', cursive;
}
html h1, body h1 { margin-top: -5rem; text-align: center; color: #41403E; font-size: 3rem;
}
html section, body section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; min-height: 100%; margin-bottom: 3rem;
}
html section button, body section button { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; background: transparent; padding: 1rem 1rem; margin: 0 1rem; -webkit-transition: all .5s ease; transition: all .5s ease; color: #41403E; font-size: 2rem; letter-spacing: 1px; outline: none; box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; /* Above is shorthand for: border-top-left-radius: 255px 15px; border-top-right-radius: 15px 225px; border-bottom-right-radius: 225px 15px; border-bottom-left-radius:15px 255px; */
}
html section button:hover, body section button:hover { box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
}
html section button.lined.thick, body section button.lined.thick { border: solid 7px #41403E;
}
html section button.dotted.thick, body section button.dotted.thick { border: dotted 5px #41403E;
}
html section button.dashed.thick, body section button.dashed.thick { border: dashed 5px #41403E;
}
html section button.lined.thin, body section button.lined.thin { border: solid 2px #41403E;
}
html section button.dotted.thin, body section button.dotted.thin { border: dotted 2px #41403E;
}
html section button.dashed.thin, body section button.dashed.thin { border: dashed 2px #41403E;
}
@media (max-width: 620px) { body h1 { margin-top: 2rem; } body section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 1rem; } body section button { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; margin-bottom: 2rem; }
}
Imperfect Buttons - Script Codes
Imperfect Buttons - Script Codes
Home Page Home
Developer Tiffany Rayside
Username tmrDevelops
Uploaded June 13, 2022
Rating 4.5
Size 3,184 Kb
Views 64,768
Do you need developer help for Imperfect Buttons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tiffany Rayside (tmrDevelops) Script Codes
Name
Fractal Cell
Liquid Lights
3D Pyramid
InterCosmic
Organizer
Discoid
Birds of a Feather
Jiggle
Old School Script Relay
Labyrinth
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!