creocodigo
Google Maps Radio Button in Pure CSS

Google Maps Radio Button in Pure CSS

Shikhar Baniya's photo
Shikhar Baniya
·

3 min read

Hello Coders! Welcome to CSS Animation Blog. In this, we're going to see how to recreate the Google Map's Radio Button in Pure CSS. This Radio buttons are those which allows us to choose the option between Car, Bicycle and to walk. This is a great practice to understand how to edit and create custom radio buttons and style it accordingly.

Here's a preview-

example.gif

That being said, let us get started.

Step - 1: Like always, create 2 files - index.html and style.css.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Google maps radio buttons</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="container">
    <h1>Google Maps Radio Buttons</h1>
    <div id="radios">
        <label for="driving" class="material-icons">
            <input type="radio" name="mode" id="driving" value="driving" checked/>
            <span>&#xE531;</span>
        </label>                                
        <label for="cycling" class="material-icons">
            <input type="radio" name="mode" id="cycling" value="cycling" />
            <span>&#xE52F;</span>
        </label>
        <label for="walking" class="material-icons">
            <input type="radio" name="mode" id="walking" value="walking" />
            <span>&#xE536;</span>
        </label>
    </div>
</div>


</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS



![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636369845978/pj4n7YsROQ.png)
, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: #f6f7fc;
  font-size: 12px;
}
body, button, input {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.background {
  display: flex;
  min-height: 100vh;
}
.container {
  flex: 0 1 700px;
  margin: auto;
  padding: 10px;
}
.screen {
  position: relative;
  background: #3e3e3e;
  border-radius: 15px;
}
.screen:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  bottom: 0;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
  z-index: -1;
}
.screen-header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: #4d4d4f;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.screen-header-left {
  margin-right: auto;
}
.screen-header-button {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-radius: 8px;
  background: white;
}
.screen-header-button.close {
  background: #ed1c6f;
}
.screen-header-button.maximize {
  background: #e8e925;
}
.screen-header-button.minimize {
  background: #74c54f;
}
.screen-header-right {
  display: flex;
}
.screen-header-ellipsis {
  width: 3px;
  height: 3px;
  margin-left: 2px;
  border-radius: 8px;
  background: #999;
}

.screen-body {
  display: flex;
}
.screen-body-item {
  flex: 1;
  padding: 50px;
}
.screen-body-item.left {
  display: flex;
  flex-direction: column;
}
.app-title {
  display: flex;
  flex-direction: column;
  position: relative;
  color: #ea1d6f;
  font-size: 26px;
}
.app-title:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 25px;
  height: 4px;
  background: #ea1d6f;
}
.app-contact {
  margin-top: auto;
  font-size: 8px;
  color: #888;
}
.app-form-group {
  margin-bottom: 15px;
}
.app-form-group.message {
  margin-top: 40px;
}
.app-form-group.buttons {
  margin-bottom: 0;
  text-align: right;
}
.app-form-control {
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 1px solid #666;
  color: #ddd;
  font-size: 14px;
  text-transform: uppercase;
  outline: none;
  transition: border-color .2s;
}
.app-form-control::-moz-placeholder {
  color: #666;
}
.app-form-control:-ms-input-placeholder {
  color: #666;
}
.app-form-control::placeholder {
  color: #666;
}
.app-form-control:focus {
  border-bottom-color: #ddd;
}
.app-form-button {
  background: none;
  border: none;
  color: #ea1d6f;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}
.app-form-button:hover {
  color: #b9134f;
}


@media screen and (max-width: 520px) {
  .screen-body {
    flex-direction: column;
  }

  .screen-body-item.left {
    margin-bottom: 30px;
  }

  .app-title {
    flex-direction: row;
  }

  .app-title span {
    margin-right: 12px;
  }

  .app-title:after {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .screen-body {
    padding: 40px;
  }

  .screen-body-item {
    padding: 0;
  }
}

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love

webdevRuby on RailswebdevelopmentHTML5CSS