How to Design A simple button in html css

0


In today's tutorial, we're diving into the art of CSS button design. Whether you're a web design beginner or looking to sharpen your skills, this article is packed with tips and tricks to help you create eye-catching, functional button for your website. Basic Button Styling: Learn how to apply fundamental CSS properties to create beautiful buttons. Hover Effects: Discover how to add interactive hover effects that make your buttons stand out. Responsive Design: Ensure your buttons look great on all devices with responsive design techniques. 👨‍💻 Who Is This For? Web Designers & Developers Beginners wanting to learn CSS Anyone interested in improving their website’s UI/UX ✨ Why Watch? Our step-by-step guide makes complex concepts easy to understand, and by the end of the article, you'll have the skills to create buttons that enhance user experience and add a professional touch to your projects. 🔗 Don’t Forget To: Subscribe for more design and coding tutorials! Leave a Comment with your questions or ideas for future articles!

Video Toturial : https://www.youtube.com/watch?v=jnxuUr59-LE

#CSS #ButtonDesign #WebDesign #FrontendDevelopment #CodingTutorial #UXDesign

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <button class="btn-custom-teal">
            CLICK ME</button>
    </div>
</body>
</html>

CSS CODE

body {
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.btn-custom-teal{
    background-color: teal;
    color: wheat;
    padding: 15px 30px;
    border-radius: 50px;
    border: 0px;
    cursor: pointer;
}
.btn-custom-teal:hover{
    background-color: rgb(83, 16, 122);
    color: wheat;
}


Tags:
إرسال تعليق (0)
أحدث أقدم