CSS Series: Toggle Button Demo

demo 1-05.png

This would be a regular stay in my notes: "Consistent practice always comes before mastery. Choose to be consistent."

The first note that comes to mind when we think about CSS is its ability to turn plain html texts or anchor links to awesome components. We style our buttons with CSS to make it look good to the user and give a good feel. In this note I was able to document my way of getting a "toggle button" (Hope this is what it is called :) ) done.

This is solely for any beginner looking to know how this is done. You can use this as a quick-fix.

THE DEMO CODE:

The HTML goes here:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle button</title>
    <link rel="stylesheet" href="toggle.css">
</head>
<body>
    <h1>A Toggle Button Demo</h1>
    <div class="toggle">
        <a href="#" class="link">Monthly billing</a>
        <a href="#" class="link">Yearly billing</a>
    </div>
</body>
</html>

The html elements follows the HTML5 standards for basic page formatting. This should give a plain document web page. This would look bad I guess. Let's get the flowers to the environment to beautify it.

The CSS code goes here:

/* Setting the general body properties */
body {
    margin: 0px;
    padding: 0px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 450;
    background-color: rgb(253, 253, 253);
    overflow: hidden;
}
/* The styles for the Page header title */
h1 {
    transform: translate(500px, 200px);
    color: royalblue;
}
/* The box styling for the toggle button */
.toggle {
    background-color: rgb(227, 233, 252);
    display: inline-block;
    padding: 10px 10px 10px 10px;
    transform: translate(550px, 200px);
    border-radius: 5px;
    font-weight: 450;
    font-size: 15px;
}
/* The styling of the link */
.link{
    text-decoration: none;
    color: black;
    margin: 10px;
}
/* The link properties on a focused state. This are the main properties in the plate that brings about the awesome feature */
.link:focus {
    background-color: royalblue;
    padding: 7px 15px 7px 15px;
    border-radius: 5px;
    margin: 0px -6px 0px -6px;
    box-shadow: 0px 2px 4px rgba(78, 78, 78, 0.205);
    color: #fff;
    font-weight: bold;
}

The CSS has some modern CSS3 features that may be new to the beginner. I shared the live demo in codemarka.dev : codemarka.dev/c/classroom/6hlE76aZKdGW2kM0B..

I hope this was valuable. Thank you in advance for sharing.