Goodle-forms-button

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

Thumbnail
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 Codepen.io
Copyright MrWicket ©

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Goodle-forms-button</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

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

  
</head>

<body>

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

</body>

</html>

/*Downloaded from https://www.codeseek.co/MrWicket/goodle-forms-button-oyvpxJ */
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;
}

Comments