There are a lot of different buttons that can be used within a User Interface. The design of these buttons can range anything from default butoon to block, icon, ghost, various size, different colour etc.
1. Default Buttons
Submit Save Add
HTML and CSS Code
HTML Code
<![CDATA[
<button class="button" type="button">Submit</button>
<button class="button" type="button">Save</button>
<button class="button" type="button">Add</button>
]]>
CSS Code
<![CDATA[
.button {
background-color: #FF9966;
color: #333333;
text-align:center;
font-size: 15px;
font-weight: bold;
height: 40px;
width: 100px;
border: none;
border-radius: 10px;
}
.button:hover {
background-color: #FFAA80;
transition: 0.2s;
}
]]>
2. Various Size Buttons
.fullwidth .small
HTML and CSS Code
HTML Code
<![CDATA[
<button class="fullwidth" type="button">.fullwidth</button>
<button class="small" type="button">.small</button>
<button class="extrasmall" type="button">.extrasmall</button>
]]>
CSS Code
<![CDATA[
.fullwidth {
background-color: #FF9966;
color: #333333;
text-align:center;
font-size: 15px;
font-weight: bold;
height: 40px;
width: 100%;
border: none;
border-radius: 10px;
}
.fullwidth:hover {
background-color: #FFAA80;
transition: 0.2s;
}
.small {
background-color: #FF9966;
color: #333333;
text-align:center;
font-size: 15px;
font-weight: bold;
height: 30px;
width: 80px;
border: none;
border-radius: 10px;
}
.small:hover {
background-color: #FFAA80;
transition: 0.2s;
}
.extrasmall {
background-color: #FF9966;
color: #333333;
text-align:center;
font-size: 10px;
font-weight: bold;
height: 20px;
width: 60px;
border: none;
border-radius: 10px;
}
.extrasmall:hover {
background-color: #FFAA80;
transition: 0.2s;
}
]]>
3. Ghost Button
.ghostbutton
.ghostbutton
.ghostbutton
HTML and CSS Code
HTML Code
<![CDATA[
<button class="ghostbutton" type="button">.ghostbutton</button>
<button class="ghostbutton" type="button">.ghostbutton</button>
<button class="ghostbutton" type="button">.ghostbutton</button>
]]>
CSS Code
<![CDATA[
.ghostbutton {
width: 100px;
height: 40px;
color: #333333;
border: none;
border-radius: 10px;
font-weight: bold;
text-align: center;
outline: none;
background-color: white;
}
.ghostbutton:hover {
background-color: #FFAA80;
transition: 0.2s;
}
]]>
4. Coloured Buttons
.redbutton
.greenbutton
.darkgreybutton
HTML and CSS Code
HTML Code
<![CDATA[
<button class="redbutton" type="button">.red</button>
<button class="greenbutton" type="button">.green</button>
<button class="darkgreybutton" type="button">.darkgrey</button>
]]>
CSS Code
<![CDATA[
.redbutton {
width: 100px;
height: 40px;
color: #FFFFFF;
border: none;
border-radius: 10px;
font-weight: bold;
text-align: center;
outline: none;
background-color: #FF4D4D;
}
.redbutton:hover {
background-color: #FF8080;
transition: 0.2s;
}
.greenbutton {
width: 100px;
height: 40px;
color: #333333;
border: none;
border-radius: 10px;
font-weight: bold;
text-align: center;
outline: none;
background-color: #4DFF4D;
}
.greenbutton:hover {
background-color: #80FF80;
transition: 0.2s;
}
.darkgreybutton {
width: 100px;
height: 40px;
color: #FFFFFF;
border: none;
border-radius: 10px;
font-weight: bold;
text-align: center;
outline: none;
background-color: #333333;
}
.darkgreybutton:hover {
background-color: #4D4D4D;
transition: 0.2s;
}
]]>
5. Icon Buttons
HTML and CSS Code
HTML Code
<![CDATA[
Link Icons in <head></head>. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="icon" type="button"><i class="fa fa-home"></i> Home</button>
<button class="icon" type="button"><i class="fa fa-cogs"></i> Settings</button>
<button class="icon" type="button"><i class="fa fa-search"></i> Search</button>
]]>
CSS Code
<![CDATA[
.icon {
background-color: #FF9966;
color: #333333;
text-align:center;
font-size: 15px;
font-weight: bold;
height: 40px;
width: 150px;
border: none;
border-radius: 10px;
}
.icon:hover {
background-color: #FFAA80;
transition: 0.2s;
}
]]>
6. Active/Disabled Buttons
Active
.buttondisabled
HTML and CSS Code
HTML Code
<![CDATA[
Link Icons in <head></head>. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="button" type="button"> Active</button>
<button class="buttondisabled" type="button" disabled> .buttondisabled</button>
]]>
CSS Code
<![CDATA[
.buttondisabled {
background-color: #999999;
color: #333333;
text-align:center;
font-size: 15px;
font-weight: bold;
height: 40px;
width: 150px;
border: none;
border-radius: 10px;
}
]]>