Item: Goodle-forms-button
Rating: 3.4
Author: MrWicket

0 Downloads
24 Views
Tweet
Download Now View Demo

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

More from MrWicket

Goodle-forms-button

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

Technologies

Comments

More from MrWicket

ResetTemplate

ResetTemplate

Goodle-forms-textInput

Goodle-forms-button

You Might Also Like

A Pen by Mostafa Nawara

[JS] laline-leve.js

Viejas Glorias

Bootstrap4-Modal

REPASO DE FUNDAMENTOS (ElAlfabeto)

A Pen by Serafino Bilotta

Freecodecamp-tribute page

A Pen by Damian