Google Mic Icon

Developer
Robert Lowe
Size
3,388 Kb
Views
68,816
  1. Google Mic Icon Previews
  2. Google Mic Icon HTML Codes
  3. Google Mic Icon CSS Codes

How do I make an google mic icon?

Decided to try and reproduce the new google mic icon in css, for practice.The yellow still isn't perfect and there's a couple of mobile issues, but it's a pretty ok first attempt :). What is a google mic icon? How do you make a google mic icon? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.

Google Mic Icon Previews
IQ Test

Google Mic Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Mic Icon</title> <link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2> <span class="blue">G</span><span class="red">o</span><span class="yellow">o</span><span class="blue">g</span><span class="green">l</span><span class="red">e</span><span>&nbsp;</span><span class="blue">M</span><span class="red">i</span><span class="yellow">c</span><span>&nbsp;</span><span class="green">I</span><span class="blue">c</span><span class="red">o</span><span class="yellow">n</span></h2>
<h3><span class="blue">i</span><span class="red">n</span><span>&nbsp;</span><span class="yellow">p</span><span class="green">u</span><span class="blue">r</span><span class="red">e</span><span>&nbsp;</span><span class="yellow">c</span><span class="green">s</span><span class="blue">s</span></h3>
<div class="display"> <div class="google-mic"> <div class="part"> <div class="blue"></div> </div> <div class="part"> <div class="red one"></div> <div class="red two"></div> <div class="yellow"></div> </div> <div class="part"> <div class="green"></div> </div> </div>
</div>
</body>
</html>

Google Mic Icon - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: 'Droid Serif', serif; letter-spacing: 0.3em;
}
h2, h3 { text-align: center; color: #4285F4;
}
h2 .blue, h3 .blue { color: #4285F4;
}
h2 .red, h3 .red { color: #EA4335;
}
h2 .yellow, h3 .yellow { color: #FBBC05;
}
h2 .green, h3 .green { color: #34A853;
}
.display { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; height: 80vh;
}
.google-mic { position: relative; padding-top: 0.8em; font-size: 4em; width: 4em; height: 4em; border: 1px solid #ccc;
}
.google-mic .part { position: relative; display: flex; justify-content: center;
}
.google-mic .part .blue { background-color: #4285F4; width: 0.78em; height: 1.6em; border-top-left-radius: 50% 30%; border-top-right-radius: 50% 30%; border-bottom-left-radius: 50% 30%; border-bottom-right-radius: 50% 30%;
}
.google-mic .part .red { margin-top: -0.6em; width: 0.8em; height: 0.93023em; background-color: transparent; border: 0.2em solid #EA4335; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent;
}
.google-mic .part .red.one { border-bottom-left-radius: 100% 100%; border-right-width: 0;
}
.google-mic .part .red.two { border-bottom-right-radius: 100% 100%; border-left-width: 0;
}
.google-mic .part .yellow { position: absolute; margin-top: -0.6em; width: 0.81633em; height: 0.93023em; background-color: transparent; border: 0.2em solid #FBBC05; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; border-bottom-left-radius: 100% 100%; border-right-width: 0; left: 1.17647em; -webkit-clip-path: polygon(0 1%, 100% 0%, 15% 100%, 0% 100%); clip-path: polygon(0 1%, 100% 0%, 15% 100%, 0% 100%);
}
.google-mic .part .green { position: absolute; background-color: #34A853; width: 0.2em; height: 0.36em; z-index: -10; top: -0.04em; left: 1.9em;
}
Google Mic Icon - Script Codes
Google Mic Icon - Script Codes
Home Page Home
Developer Robert Lowe
Username rlo206
Uploaded July 23, 2022
Rating 3
Size 3,388 Kb
Views 68,816
Do you need developer help for Google Mic Icon?

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!

Robert Lowe (rlo206) Script Codes
Name
Customizable ripples with angular
Dynamic UI with AngularJS attributes
Testing Semantic UI Grid
A Pen by Robert Lowe
The Rainball
Exploring ngForm
Learning to style range inputs
Animated slider in pure angular
CSS Color Wheel Loaders
Whirlpool Spinner with 4 sizes
Create amazing art & images 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!