Button

Default Button Button Mit Icon Button Mit Outline Farbiger Button Runder Button Mit Icon

                
                
                    
<button type="button" class="stg-header_buttons stg-btn_orange stg-cp">
    <div class="stg-flex_align_start">
        <img src="./images/icon_plus_black.png" class="stg-pr_5">
        Neues Video
    </div>
</button>

                
                
                    

.stg-header_buttons {
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 30px;
  padding: 20px 28px;
}

.stg-btn_orange {
  border: 2px solid var(--orange);
  background-color: var(--orange);
  color: var(--grau_1);
}

/* Hover-Zustand */
.stg-btn_orange:hover {
  border-color: #d98800;
}

/* Aktiver (Klick-)Zustand */
.stg-btn_orange:active {
  background-color: #d98800;
  border-color: #d98800;
}

.stg-cp {
  cursor: pointer;
}

.stg-flex_align_start {
  display: flex;
  align-items: start;
}

.stg-pr_5 {
  padding-right: 5px;
}

#icon button #icon mit button #button icon