How to Create a Button in HTML/CSS 🔘

The navigational system of your website is one of its most important features.

You can use simple hyperlinks.

You can use fancy 'Navbars' built with Javascript.

You can use simple button images with your hyperlinks.

You can also create buttons using CSS and HTML5 code which mimic the mechanical aspects of Js navbars. And these won't slow your pages or create errors in browsers that don't support Js.

Most of the code is set up in the Style Sheets.

Choices

Animation

TopButton

WingDings

GoBack

PopOver

Details

PopUp

Accordian

The Button

Button

The HTML

<p><a href="#" class="button1">Button</a></p>

Size is determined by size of text and padding.

Us your imagination on the colors and shadow changes.

The CSS

p a.button1 {
text-align:center;
padding: .625rem 1.5rem !important;
background-color: #ff9900;
box-shadow: -4px -4px 8px #000 inset;
border: none;
border-radius: 45px;
}

p a.button1 {
font-family: arial;
font-weight: bold;
font-size: 1.25rem;
color: #fff !important;
text-decoration: none;
text-shadow: 1px 1px 2px #000;
margin: 0 0;
}

p a:hover.button1 {
font-weight:normal;
background : whitesmoke;
color:#000 !important;
text-decoration: none;
box-shadow: 0px 4px 14px #000 inset;
text-shadow:none;
border: none
}

Simple Transition

Want to add animation to your buttons? Learn as much as you can about Transition and Transform

Button

The HTML

<p class="square">Button</p>

Use your imagination and experiment with the colors and size timing changes.

The CSS


p.square {
  width: 6rem;
  height: 6rem;
  color : white;
  background : red;
  transition: width 2s, height 2s, background-color 3s;
}

p.square:hover {
  width: 12rem;
  height: 12rem;
  background : dodgerblue;
}

The Top Button

The trend in web design today seems to have moved to long scrolling pages rather than multiple pages that require clicking. Some are even telling us that the click is dead. Personally, I believe we'll end up with a combination of the two.

Enter The Top Button and The Up Button

I can't imagine what a nightmare these endlessly scrolling pages of 10000+ words are for SEO!! May be the reason you don't see these Magnificent Masterpieces in the SERPS. Pay Google or sink into the BLACK HOLE!

Top

Very Basic HTML

<p><a href="#" class="top-button">Top</a></p>

💡 Time Out for a teaching Moment

In CSS, the !important declaration is used to give a specific style rule the highest priority, overriding any other conflicting rules, regardless of specificity or source order. It ensures that the style is applied no matter what.(From Copilot)

Warning!! Use this feature sparingly and only as a quick temporary fix.

The CSS

p a.top-button {
/*Button*/
display : flex;
justify-content : center;
align-items: center;
position: fixed; /*Make it Stick to Viewport*/
bottom: 2rem; /* Define Position */
left: 1.5rem;
width: 3rem; /* Define Size */
height: 3rem;
background: dodgerblue;
border: solid 4px #ffff00;
border-radius: 50%;
box-shadow: 1px 1px 4px #000;
/*Button Text*/
font-family: Helvetica , arial, serif;
color: #fff !important ;
font-size: 1.125rem;
font-weight: bolder;
text-decoration: none;
text-indent:0;
text-shadow : 1px 1px 2px #000;
}


p a:hover.top-button {
color: #000 ;
background-color: whitesmoke ;
box-shadow: 1px 1px 4px #000 inset ;
text-shadow:none;
border: solid 1px #000;

}

Using Windings

👆


<p>
<a href="#heading" style="text-decoration: none" title="Go To Top">
<span style="font-size :50px; text-shadow: 1px 1px 2px #000">&#128070; </span><a>
</p>

Another Winding

🔝


<p>
<a href="#heading" style="text-decoration: none" title="Go To Top">
<span style="font-size :50px; text-shadow: 1px 1px 2px #000">&#128285; </span><a>
</p>

The Up Button

👆

You could convert the Top button to an Up button and place your destination tags at various desired page break points. The CSS would be the same.

<p><a href="#pagebreak1">Up&nbsp;</a></p>

Specify the location you want to jump to like so:

<h2 id="pagebreak1">Simple Transition</h2>

The Go Back Button

Hey! Search for days and you won't find this one.

Here we use the button tag with a Wingding and just a smidge of javascript.

Go Back buttons are active. Use Forward arrow to return.

Wingding: 🔙

The HTML

<p class="goback">
<button title="Go Back" onclick="history.back()">
<span>&#128072;</span>
</button>
</p>

The CSS

p.goback button {
border:none; 
background: transparent; 
padding: 0 0; margin: 0 0
}

p.goback button span {
font-size :50px; 
text-shadow: 1px 1px 2px #000; 
padding: 0 0 ; 
margin: 0 0
}

Using an Image

Here we use the button tag with an image and the same smidge of javascript.

Go Back buttons are active. Use Forward arrow to return.

The HTML

<p class="goback">
<button title="Go Back" onclick="history.back()">
<img src="bullets/arrowbluel.gif" alt="Free bullets for web pages">
</button>
</p>

The CSS

p.goback button {
border:none; 
background: transparent; 
padding: 0 0; margin: 0 0
}

p.goback button img {
width :50px; 
box-shadow: none; 
padding: 0 0 ; 
margin: 0 0
}

How easy is this? The Popover is a little ditty that toggles a message in and out of view. Copy , paste and restyle to your tastes. To Close: Press Escape or Click anywhere on the page.

What you see is what you GIT!

The HTML


<!-- Trigger Button -->
<button popovertarget="myPopover">
POPOVER
</button>

<!-- Popover Element -->
<div id="myPopover" popover>
  What you see is what you GIT!
</div>

The CSS

 

/*Trigger Button*/
 color: #fff;
 background: #0066cc; 
 font-weight: bold;
 padding:4px 4px"
/*PopOver Element*/
width:25dvw; 
padding: 2dvw;
border: dotted 3px #0066cc;
margin: 0 auto

Details

Can this be any easier?
See a working example of the CSS on the right

The HTML


<details>
<summary>Read More</summary>

Can this be any easier?
</details>

The CSS


details {
border: none;
width: 50dvw;
min-width:340px;
padding: 1dvw
}
details[open] {
border: 1px solid;
box-shadow: 1px 1px 4px #444 
}

details[open]:hover {
border: 1px solid;
box-shadow: 1px 1px 8px #444 
}


summary {
	width: 15dvw;
	min-width: 180px;
	background:#000;
	color:#fff;
	padding: 2px
}
summary::marker {
  color: #fff;
  font-size: 1.25em;
}

Popups

Dialog boxes can be a useful tool in web design. Use your imagination.

See: Working Example

The Code

Copy and paste and change the inline style settings to your own tastes.



<dialog id="popup" style="width:75dvw;margin :0 auto;scrollbar-width:none">

<form method="dialog">


<button style="position: absolute; top :0; right: 20px;background:whitesmoke; font-size: 1.25rem; color:#000;padding: 4px 5px; margin: 1dvw 5%">X</button>


<div style="padding: 1dvw 5dvw;">
<h1>Content Here</h1>
<p>Style as you would any web page</p>
<p class="spacer"> </p>
</div>


 </form>
</dialog>


<!--Popup Button-->
<button onclick="popup.showModal()" style="background:#0066cc; font-size: 1.25rem; color:#fff;padding: 4px 10px">
  Open Popup
</button>

The Accordian

More Help

Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.

Tutor Instructions

See: Working Example

The HTML


<div class="collapse-wrapper">
  <input type="radio" name="collapse" id="collapse-one">

  <label class="collapse-title" for="collapse-one">
    <span>More Help</span>
  </label>

  <div class="collapse-content">
    <p>Your content....</p>
  </div>
</div>

Repeat the block of code shown above but change the 2 lines shown below for each block added.

  <input type="radio" name="collapse" id="collapse-two">

  <label class="collapse-title" for="collapse-two">

The CSS


input {
  display: none;
}

input:checked ~ .collapse-content {
  width: 25rem;
  height: 200px;
  padding: 2px 4px;
  border: solid 1px
}

.collapse-content {
  height: 0;
  overflow: scroll;
  /*transition: all 0.1s ease-in-out;*/
}

span {
display:block;
width : 25rem;
background: black;
color: #fff;
padding: 2px 4px;
margin:2px 0;
border: solid 1px}

span:hover {
background:#c0c0c0;
color:#000;

}

p {
font-size: 1.25rem;
text-indent: 1rem;
margin: 1dvw 2dvw
}

/* Hide scrollbar for Chrome, Safari and Opera */
div.collapse-content::-webkit-scrollbar {
    display: none;
    overscroll-behavior: contain
}

/* Hide scrollbar for IE, Edge and Firefox */
div.collapse-content {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  overscroll-behavior: contain
}

🔺

How to Create a Button in HTML/CSS 🔘

Choices

The Button

The HTML

The CSS

Simple Transition

The HTML

The CSS

The Top Button

Very Basic HTML

The CSS

Using Windings

Another Winding

The Up Button

The Go Back Button

The HTML

The CSS

Using an Image

The HTML

The CSS

Popovers

The HTML

The CSS

Details

The HTML

The CSS

Popups

The Code

The Accordian

The HTML

The CSS