Buttons

Submit Buttons

HTML

<div id="submit_buttons"> <!-- Div seperating the submit buttons --> <h2 class="page_headings">Submit Buttons</h2> <!-- Div heading --> <button id="submit_red">Submit</button> <!-- Submit button with red border --> <button id="submit_green">Submit</button> <!-- Submit button with green border --> <button id="submit_blue">Submit</button> <!-- Submit button with blue border --> </div>

CSS

#submit_buttons { padding-bottom: 40px; } #submit_red { background-color: white; font-size: 22px; padding: 15px; width: 10em; color: black; border-radius: 5px; border: 2px solid red; cursor: pointer; } #submit_green { background-color: white; font-size: 22px; padding: 15px; width: 10em; color: black; border-radius: 5px; border: 2px solid green; cursor: pointer; } #submit_blue { background-color: white; font-size: 22px; padding: 15px; width: 10em; color: black; border-radius: 5px; border: 2px solid blue; cursor: pointer; }

Search Buttons

HTML

<div id="search_buttons"> <!-- Div seperating the search buttons --> <h3 class="page_headings">Search Buttons</h3> <!-- Div heading --> <button id="search_red">Search</button> <!-- Search button with red background --> <button id="search_green">Search</button> <!-- Search Button with green background --> <button id="search_blue">Search</button> <!-- Search button with blue background --> </div>

CSS

#search_buttons { padding-bottom: 40px; } #search_red { background-color: red; font-size: 22px; padding: 15px; width: 10em; color: white; border-radius: 5px; border: 2px solid red; cursor: pointer; } #search_green { background-color: green; font-size: 22px; padding: 15px; width: 10em; color: white; border-radius: 5px; border: 2px solid green; cursor: pointer; } #search_blue { background-color: blue; font-size: 22px; padding: 15px; width: 10em; color: white; border-radius: 5px; border: 2px solid blue; cursor: pointer; }

Hover Buttons

HTML

<div id="hover_buttons"> <!-- Div seperating buttons with the hover effect --> <h4 class="page_headings">Hover Buttons</h4> <!-- Div heading --> <button id="hover_red">Hover</button> <!-- Button with a red hover effect --> <button id="hover_green">Hover</button> <!-- Button with a green hover effect --> <button id="hover_blue">Hover</button> <!-- Button with a blue hover effect --> </div>

CSS

#hover_buttons { padding-bottom: 40px; } #hover_red { background-color: white; font-size: 22px; padding: 15px; width: 10em; color: black; border-radius: 5px; border: 2px solid red; cursor: pointer; } #hover_green { background-color: white; font-size: 22px; padding: 15px; width: 10em; color: black; border-radius: 5px; border: 2px solid green; cursor: pointer; } #hover_blue { background-color: white; font-size: 22px; padding: 15px; width: 10em; color: black; border-radius: 5px; border: 2px solid blue; cursor: pointer; } #hover_red:hover { background-color: red; color: white; } #hover_green:hover { background-color: green; color: white; } #hover_blue:hover { background-color: blue; color: white; }
Buttons with Icons

HTML

<div id="buttons_with_icons"> <!-- Div seperating buttons with icons --> <h5 class="page_headings">Buttons with Icons</h5> <!-- Div heading --> <button id="search_icon">Search<i><img class="button_icons" alt="search icon" src="search_icon.png"></i></button> <!-- Search button with an icon --> <button id="settings_icon">Settings<i><img class="button_icons" alt="settings icon" src="settings_icon.png"></i></button> <!-- Settings button with an icon --> <button id="like_icon">Like<i><img class="button_icons" alt="like icon" src="like_icon.png"></i></button> <!-- Like button with an icon --> </div>

CSS

#search_icon { background-color: white; font-size: 22px; padding: 15px; width: 10em; color: black; border-radius: 5px; border: 2px solid black; cursor: pointer; } #settings_icon { background-color: white; font-size: 22px; padding: 15px; width: 10em; color: black; border-radius: 5px; border: 2px solid black; cursor: pointer; } #like_icon { background-color: white; font-size: 22px; padding: 15px; width: 10em; color: black; border-radius: 5px; border: 2px solid black; cursor: pointer; } .button_icons { display: block; height: 20px; width: 20px; margin: 0; float: right; }