Button by guilhermeyohan

Made by

@guilhermeyohan

Theme:

Dark

#button

#212121

347 views

CSSAdd prefixes

1.beach-button {
2  background-color: #fbc02d;
3  border: none;
4  border-radius: 5px;
5  color: #333;
6  cursor: pointer;
7  display: flex;
8  align-items: center;
9  font-size: 18px;
10  font-weight: bold;
11  padding: 10px 20px;
12  transition: all 0.3s ease;
13}
14
15.beach-button:hover {
16  background-color: #ffe082;
17}
18
19.beach-button svg {
20  height: 20px;
21  margin-right: 10px;
22  width: 20px;
23}

.beach-button {
  background-color: #fbc02d;
  border: none;
  border-radius: 5px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.beach-button:hover {
  background-color: #ffe082;
}

.beach-button svg {
  height: 20px;
  margin-right: 10px;
  width: 20px;
}

HTML

1<button class="beach-button">
2  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
3    <path d="M12 1L2 21h20z" fill="#fff"></path>
4    <path d="M12 16.6l-4-4.2 1.4-1.4L12 13l6.6-6.6L18 9z" fill="#1565c0"></path>
5    <path d="M12 18h-.3c-3.8-.3-7-3.5-7.3-7.3H1.9c.4 4.5 4.2 8.2 8.8 8.7V22c1.6 0 3-1.3 3-3s-1.3-3-3-3z" fill="#00838f"></path>
6    <path d="M12 18c-.6 0-1.1-.1-1.6-.2-1.2-.4-2.2-1.4-2.6-2.6-.1-.5-.2-1-.2-1.6 0-.9.2-1.8.7-2.5l4.4 4.4-1.4 1.4-3-3v-4.2c.7-.4 1.6-.7 2.5-.7.6 0 1.1.1 1.6.2 1.2.4 2.2 1.4 2.6 2.6.1.5.2 1 .2 1.6 0 .9-.2 1.8-.7 2.5l-4.4-4.4 1.4-1.4 3 3v4.2c-.7.4-1.6.7-2.5.7z" fill="#00acc1"></path>
7  </svg>
8  <span>Download</span>
9</button>

<button class="beach-button">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 1L2 21h20z" fill="#fff"></path>
    <path d="M12 16.6l-4-4.2 1.4-1.4L12 13l6.6-6.6L18 9z" fill="#1565c0"></path>
    <path d="M12 18h-.3c-3.8-.3-7-3.5-7.3-7.3H1.9c.4 4.5 4.2 8.2 8.8 8.7V22c1.6 0 3-1.3 3-3s-1.3-3-3-3z" fill="#00838f"></path>
    <path d="M12 18c-.6 0-1.1-.1-1.6-.2-1.2-.4-2.2-1.4-2.6-2.6-.1-.5-.2-1-.2-1.6 0-.9.2-1.8.7-2.5l4.4 4.4-1.4 1.4-3-3v-4.2c.7-.4 1.6-.7 2.5-.7.6 0 1.1.1 1.6.2 1.2.4 2.2 1.4 2.6 2.6.1.5.2 1 .2 1.6 0 .9-.2 1.8-.7 2.5l-4.4-4.4 1.4-1.4 3 3v4.2c-.7.4-1.6.7-2.5.7z" fill="#00acc1"></path>
  </svg>
  <span>Download</span>
</button>