Buttonized ul/li menu

Developer
Daniel
Size
2,102 Kb
Views
18,216
  1. Buttonized ul/li menu Previews
  2. Buttonized ul/li menu HTML Codes
  3. Buttonized ul/li menu CSS Codes
  4. Buttonized ul/li menu JS Codes

How do I make an buttonized ul/li menu?

A basic buttonized UL/LI menu w. nice trans.hovers. What is a buttonized ul/li menu? How do you make a buttonized ul/li menu? This script and codes were developed by Daniel on 04 September 2022, Sunday.

Buttonized ul/li menu Previews
IQ Test

Buttonized ul/li menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Buttonized ul/li menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<br><br><br><br>
<ul class="menu"> <li><a href="#" title="">Button A <i class="fa fa-chevron-right"></i> </a> </li> <li><a href="#" title="">Button B <i class="fa fa-chevron-right"></i> </a> </li>
</ul> <script src="js/index.js"></script>
</body>
</html>

Buttonized ul/li menu - Script Codes CSS Codes

*{margin:0;padding:0;}
body{background:#fff;}
.fa-chevron-right{	float:right; padding:5px; color:#ececec;}
.menu{ width:220px;margin:0 auto; list-style:none;
}
.menu li{
width:100%;
vertical-align:center;
margin-top:5%;
float:left;
position:relative;
}
/*Linkstyles*/
.menu li a{ -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 1 ease-out; -o-transition: background-color 1s ease-out; transition: background-color 1s ease-out; font:600 100%/25px "Helvetica Neue",Arial,Sans-serif; color:#444; text-decoration:none; text-align:center; display:block; background:#ececec; padding:10px; border: solid 1px #dedede; border-radius:5px;/*beta. */ -moz-border-radius:5px; -os-border-radius:5px;
}
.menu li a:hover{ background:#ccc; color: #424242; cursor: pointer;
}
.menu li a:focus{ background:#0DACFF; color:#fff;
}
.menu li a:active { background:#fff; }

Buttonized ul/li menu - Script Codes JS Codes

/*
A simple button w. fade in transistion on hover.
*/
Buttonized ul/li menu - Script Codes
Buttonized ul/li menu - Script Codes
Home Page Home
Developer Daniel
Username deeman
Uploaded September 04, 2022
Rating 3
Size 2,102 Kb
Views 18,216
Do you need developer help for Buttonized ul/li menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel (deeman) Script Codes
Name
Subleveled Menu - Responsive and simple
Sitemap
Box v0.1
Simple Responsive Navigation,
Imagelinking
Tabelldata-TTSTAT-2
YellowBoxes
Tabelldata-TTSTAT
Box w. images v0.1
The Awesome Responsive Form
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!