Home DFS SB OD SDN

Notice: How To Tip The Webmaster.

You are at the section Creating CSS Colorful Link Buttons

Click to Select a Page... Main Page Step 1: Creating the HTML Template Step 2: Insert the Black Button CSS Family Step 3: See the CSS Button CSS Style Button Codes: Black CSS Style Button Codes: Blue CSS Style Button Codes: Red CSS Style Button Codes: Orange CSS Style Button Codes: Brown CSS Style Button Codes: Green CSS Style Button Codes: Fuchsia CSS Style Button Codes: Teal CSS Style Button Codes: Purple All the Buttons in Action Other Colors to Try Make Your Own Buttons Template External CSS Style Sheet Buttons On Light Background Buttons On Dark Background Silicon Cajon Home Page DavesFunStuff Dave's Fun Stuff Find your favorite TV shows with "Let's Watch TV!" Dave's Fun Stuff SDN Media News and More Dave's Fun Stuff Super Birthdays Contact Webmaster

Make Your Own Buttons Template

Here is the template for the CSS coding.

.sidemenu1a {
display: inline-block; text-decoration: none; border:1px solid [brdrclr]; border-radius: 8px;
margin: 2px 2px; padding: 0px 2px; transition-duration: 0.2s;
}
a.sidemenu1a:link { font-family: tahoma, arial, sans-serif, helvetica; color:[textclr]; background-color:[bckgclr] }
a.sidemenu1a:visited { color:[textclr]; background-color:[bckgvclr] }
a.sidemenu1a:hover { color:[textclr]; background-color:[brdrclr]; text-decoration: none }
a.sidemenu1a:active { color:[textclr]; background-color:[brdrclr] }
.sidemenu1a1 {
display: inline-block; text-decoration: none; border:1px solid [brdrclr]; border-radius: 8px;
margin: 2px 2px; padding: 0px 2px; transition-duration: 0.2s;
}
a.sidemenu1a1:link {
font-family: tahoma, arial, sans-serif, helvetica; color:[textclr]; background-color:[brdrclr];
}
a.sidemenu1a1:hover { text-decoration: none }
a.sidemenu1a1:visited { color:[textclr]; background-color:[brdrclr] }

Replace [brdrclr] with a border color

Replace [textclr] with a text color. Sometimes it may be black, another dark color or the same as the border color. If using a dark background, use white or another light color.

Replace [bckgclr] with a background color

Replace [bckgvclr] with a background color to indicate that your web visitor already visited the link.

In the body part of the HTML, format your links using the sidemenu1a class and customize this link below:

<a class="sidemenu1a" href="http://[your domain]">[your website name]</a>

Menu:
Creating CSS Colorful Link Buttons Main Page Step 1: Creating the HTML Template Step 2: Insert the Black Button CSS Family Step 3: See the CSS Button CSS Style Button Codes: Black CSS Style Button Codes: Blue CSS Style Button Codes: Red CSS Style Button Codes: Orange CSS Style Button Codes: Brown CSS Style Button Codes: Green CSS Style Button Codes: Fuchsia CSS Style Button Codes: Teal CSS Style Button Codes: Purple All the Buttons in Action Other Colors to Try Make Your Own Buttons Template External CSS Style Sheet Buttons On Light Background Buttons On Dark Background
Related:
Silicon Cajon Home Page DavesFunStuff
Market Zone:
Dave's Fun Stuff
TV Zone:
Find your favorite TV shows with "Let's Watch TV!"
Notable:
Dave's Fun Stuff SDN Media News and More
Footer:
Dave's Fun Stuff Super Birthdays Contact Webmaster



© 1995-2023. davesfunstuff.com. All Rights Reserved. Reproduction of any part of this website without expressed written consent is prohibited.