In this example below you will see how to do a Goodle-forms-button with some HTML / CSS and Javascript

This awesome code was written by MrWicket, you can see more from this user in the personal repository.
You can find the original code on
Copyright MrWicket ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <link rel='stylesheet prefetch' href=''>
<link rel='stylesheet prefetch' href=''>

      <link rel="stylesheet" href="css/style.css">



  <div class="card">
  <button class="basic-button primary">
    <i class="fa fa-smile-o" aria-hidden="true"></i> Button



/*Downloaded from */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;

* {
  box-sizing: border-box;

body {
  background: linear-gradient(135deg, #13f1fc 0%, #0470dc 100%);
  display: flex;
  align-items: center;
  justify-content: center;

.card {
  padding: 4rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;

.basic-button {
  border: none;
  background: none;
  font-weight: 900;
  color: #FF6A89;
  padding: 5px 15px;
  border-radius: 30px;
  cursor: pointer;
  transition: .2s;
  border: 2px solid #FF6A89;
.basic-button i {
  padding-right: 5px;
.basic-button:hover {
  background: #FF6A89;
  color: #fff;
.basic-button:focus {
  outline: none;
  background: #FF6A89;
  color: #fff;
  padding: 5px 20px;