Simple Flat Option Button - Pure CSS
close
Simple Flat Option Button - Pure CSS

Simple Flat Option Button - Pure CSS

Simple Flat Option Button - Pure CSS

In this article and going to share with you a simple flat option button which will have two options true or false. You can simply integrate this into your web page and easily have fun with it.

It is having nice appearance and beautiful UI design.

Greetings friends today we are going to make Simple Flat Option Button

As you know the HTML directory is necessary for that so we should have some HTML directory first . Below is the code provided and you have to save it with the filename as provided.

Create New directory because we are going to work in that directory give it a name Simple Flat Option Button and save all the files in it as they are said in the steps below.

The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

There are some external files used in the code provided below you can download them if you want:
https://daneden.github.io/animate.css
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js


Save It As Simple Flat Option Button/index.html :

<link rel='stylesheet' href='https://daneden.github.io/animate.css/animate.min.css'><link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'><link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'><link rel="stylesheet" href="css/style.css"><div class='container'><p>Hey there, want a friend?</p><div class='btn-group animated bounceIn'><a class='btn' href='https://www.softwebtuts.com/'><div class='fa fa-check'></div></a><span>or</span><a class='btn' href='http://www.raufgraphics.com/'><div class='fa fa-times'></div></a></div></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 

Make External Stylesheet

With an external style sheet, you can change the look of an entire website by changing just one file i have included in the code above and also added in the project files.

Our HTML page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section in this article we will make external stylesheet in css directory.

The main code that will be included in the header tags will be similar to this <link rel='stylesheet' href='Simple Flat Option Button/css/style.css' />
I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

You can replace the links which I have used in the above code.
Without CSS our this script (Simple Flat Option Button) will never look wonderful. So here we are, our HTML directory is ready now we have to personalize our HTML and it can be done using CSS.

So below is the CSS code for our HTML directory and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.

The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

There are some external files used in the code provided below you can download them if you want:
https://s3.amazonaws.com/ooomf-com-files/Vo7YbYQQ8iyOo4J9bOoj_ggb24.jpg

Save It As Simple Flat Option Button/css/style.css :

body{background:#f7f7f7 url("https://s3.amazonaws.com/ooomf-com-files/Vo7YbYQQ8iyOo4J9bOoj_ggb24.jpg") no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;font-family:"Roboto";font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body::before{content:'';position:fixed;z-index:-1;top:0;left:0;background:#c0392b;background:rgba(52, 152, 219, 0.9);width:100%;height:100%}.container{position:fixed;top:50%;left:50%;margin:-112px 0 0 -200px}.container p{color:#fff;text-align:center;font-size:30px}.container .btn-group{position:relative}.container .btn-group .btn{cursor:pointer;display:inline-block;background:#34495e;width:200px;height:120px;border-bottom:5px solid #2c3e50;color:#fff;font-size:36px;line-height:120px;text-align:center;vertical-align:middle;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px}.container .btn-group .btn:last-child{background:#fff;border-bottom:5px solid #ccc;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;color:#34495e;margin:0 0 0 -4px}.container .btn-group .btn:active{margin-top:5px;border:none;box-shadow:none}.container .btn-group span{position:absolute;top:50%;left:50%;z-index:999;display:inline-block;background:#34495e;width:40px;height:40px;line-height:40px;margin:-25px 0 0 -25px;color:#fff;border:5px solid #fff;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;text-align:center;vertical-align:middle}

In the above code i have used font awesome icons that's why I have integrated that library.

SelectorExampleExample description
:activea:activeSelects the active link
:last-childp:last-childSelects every <p> elements that is the last child of its parent


In the above code some color codes are used that are listed below you can change them as required.

  • #f7f7f7

  • #c0392b

  • rgba(52, 152, 219, 0.9)

  • #fff

  • #34495e

  • #2c3e50

  • #fff

  • #fff

  • #ccc

  • #34495e

  • #34495e

  • #fff

  • #fff


  • Outcome :

    So here we are, We have done and our project Simple Flat Option Button is ready now you can save all the files as provided.

    Like CSS files in css directory and JavaScript files in a js directory name. Below is directory tree of the files and folders of this project.


    • Simple Flat Option Button
      • css
        • style.css
      • js
      • index.html

    If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

    Download Project (Simple Flat Option Button) File :

    Simple Flat Option Button.zip
    File Size 3.77 KB
    Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

    So our today's project is completed I have also provided that download files above you can download them from the above link that's free do it now and also subscribe to the newsletters and join our mailing list.
    Thank you !




    Disqus Codes

    No comments

    Notifications

    Disqus Logo