Button

Example

Classic buttons that can be used for different purposes and can have different functionalities.

They are used by copying the desired button and its CSS and placing it where you want.

btn-1

     
<button class="btn-1">btn-1</button>

.btn-1 {
font-size: 18px;
flex-grow: 0;
background-color: #343c42;
color: #fe5026;
border: 1px solid #3D6AAD;
border-radius: 4px;
}

btn-2

     
<button class="btn-2">btn-2</button>

.btn-2 {
font-size: 18px;
flex-grow: 0;
background-color: #343c42;
color: #3D6AAD;
border: 1px solid #fe5026;
border-radius: 4px;
}

btn-3

     
<button class="btn-3">btn-3</button>

.btn-3 {
font-size: 18px;
flex-grow: 0;
background-color: #2c2f33;
color: #fe5026;
border: 1px solid #3D6AAD;
}

btn-4

     
<button class="btn-4">btn-4</button>
.btn-4 {
font-size: 18px;
flex-grow: 0;
background-color: #2c2f33;
color: #3D6AAD;
border: 1px solid #fe5026;
}

btn-5

     
<button class="btn-5">btn-5</button>

.btn-5 {
font-size: 18px;
flex-grow: 0;
background-color: #343c42;
color: green;
border: 1px solid #fe5026;
border-radius: 4px;
}

btn-6

<button class="btn-6">btn-6</button>

.btn-6 {
font-size: 18px;
flex-grow: 0;
background-color: #343c42;
color: red;
border: 1px solid #fe5026;
border-radius: 4px;
}

btn-7

     
<button class="btn-7">btn-7</button>

.btn-7 {
font-size: 18px;
flex-grow: 0;
background-color: #343c42;
color: green;
border: 1px solid #fe5026;
border-radius: 4px;
display: table;
margin: 0 auto;
}

btn-8

     
<button class="btn-8">btn-8</button>

.btn-8 {
font-size: 18px;
flex-grow: 0;
background-color: #343c42;
color: red;
border: 1px solid #fe5026;
border-radius: 4px;
display: table;
margin: 0 auto;
}

Send

     
<button id="btn-send">Send</button>

#btn-send {
background-color:#2c2f33;
color:#fe5026;
padding: 10px 40px;
border: 0px;
}

Close

     
<button class="btnClose">Close</button>

.btnClose {
background-color:#2c2f33;
color:#fe5026;
box-shadow:0 0 5px #3D6AAD;
border-radius:5px;
border: 1px solid #3D6AAD;
}

SE btn

     
<button class="se-dugme">SE btn</button>

.se-dugme {
padding: 6px 8px;
font-size: 18px;
flex-grow: 0;
background-color:#2c2f33;
color:#3D6AAD;
border: 1px solid #3D6AAD;
}

Like

     
<button class="like">Like</button>

.like{
font-size: 18px;
flex-grow: 0;
background-color: #343c42;
color: #fe5026;
border: 1px solid #3D6AAD;
border-radius: 4px;
}

Load more

     
<button class="loadmore">Load more</button>

.loadmore {
font-size: 18px;
flex-grow: 0;
background-color: #343c42;
color: #fe5026;
border: 2px solid #3D6AAD;
width: 100%;
}

Unike

 
<button class="unlike">Unike</button>

.unlike {
font-size: 18px;
flex-grow: 0;
background-color: #343c42;
color: #3D6AAD;
border: 1px solid #fe5026;
border-radius: 4px;
}

Top

<button class="top">Top</button>

.top {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
outline: none;
background-color: #343c42;
color: #fe5026;
cursor: pointer;
padding: 15px;
border: 1px solid #3D6AAD;
}

Read More

  
<a href="#"><button class="b1">Read More</button></a>

.b1 {
background-color: #2c2f33;
color: #fe5026;
text-align: center;
color: #fe5026;
box-shadow: 0 4px 8px 0 #3D6AAD;
}