CreateaFreeWebsite
with HTML and 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.
<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.
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
}
Want to add animation to your buttons? Learn as much as you can about Transition and Transform
Button
<p class="square">Button</p>
Use your imagination and experiment with the colors and size timing changes.
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 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!
<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)
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;
}
<p> <a href="#heading" style="text-decoration: none" title="Go To Top"> <span style="font-size :50px; text-shadow: 1px 1px 2px #000">👆 </span><a> </p>
or 🔝 Wingding: 🔝
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" class="top-button">Up </a></p> Specify the location you want to jump to like so: <h2 id="pagebreak1">The Button 2
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.
<p class="goback"> <button title="Go Back" onclick="history.back()"> <span>👈</span> </button> </p>
or
Wingding: 🔙
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
}
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.
<p class="goback"> <button title="Go Back" onclick="history.back()"> <img src="bullets/arrowbluel.gif" alt="Free bullets for web pages"> </button> </p>
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.
<!-- Trigger Button --> <button style="color: #fff;background: #0066cc; font-weight: bold;padding:4px 4px" popovertarget="myPopover">POPOVER</button> <!-- Popover Element --> <div style="width:25%; padding: 2% 2%;border: dotted 3px #0066cc;margin: 0 auto" id="myPopover" popover> What you see is what you GIT! </div>
Dialog boxes can be a useful tool in web design. Use your imagination.
Copy and paste and change the inline style settings to your own tastes.
<dialog id="popup" style="width:75%;margin :0 auto;scrollbar-width:none"> <form method="dialog"> <button style="background:#0066cc; font-size: 1.25rem; color:#fff;padding: 4px 5px; margin: 1% 5%">Close</button> <div style="padding: 1% 5%;"> <h1>Content Here</h1> <p>Style as you would any web page</p> <p class="spacer"> </p> </div> <button style="background:#0066cc; font-size: 1.25rem; color:#fff;padding: 4px 5px; margin: 1% 5%">Close</button> </form> </dialog> <!--Popup Button--> <button onclick="popup.showModal()" style="background:#0066cc; font-size: 1.25rem; color:#fff;padding: 4px 10px"> Open Popup </button>