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 08 November 2021, Monday.

How do I make an buttonized ul/li menu?
  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
Buttonized ul/li menu Previews

Buttonized ul/li menu 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 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 JS Codes

/* 
A simple button w. fade in transistion on hover.

*/
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.