Home/ Questions/Q 3598408
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T20:14:18+00:00

What I’m trying to do to design a vertical CSS menu like this one

  • 0

What I’m trying to do to design a vertical CSS menu like this one . on the right of this site
alt text

. I’ve two problems .

  1. How can I add an image in the menu item .

  2. How can I MAKE the BORDER RADIUS of all the item on the top and on the bottom NOT for each one .

That’s my code

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS3 Buttons</title>
    <style>


    .button {
     width: 400px;
     height: 100px;
     line-height: 100px;
     color: #C0C0C0; 
     text-decoration: none;
     font-size: 50px;
     font-family: helvetica, arial;
     font-weight: bold;
     display: block;
     text-align: center;
     position: relative;
     padding-bottom:1px;

     /* BACKGROUND GRADIENTS */
     background: #F5F3F4;



     /* BORDER RADIUS */
     /* -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px; */


     /* TEXT SHADOW */

     text-shadow: 1px 1px 1px black;

     /* BOX SHADOW */
     -moz-box-shadow: 0 1px 3px black;
     -webkit-box-shadow: 0 1px 3px black;
     box-shadow: 0 1px 3px black;
    }

    /* WHILE HOVERED */
    .button:hover {
         color: #A8A8A8;
        -moz-box-shadow: 0 2px 6px black;
        -webkit-box-shadow: 0 2px 6px black;

    }

    /* WHILE BEING CLICKED */
    .button:active {
        -moz-box-shadow: 0 2px 6px black;
        -webkit-box-shadow: 0 2px 6px black;
    }


    </style>
</head>
<body>
     <a href="#" class="button"> Profile  </a>
     <a href="#" class="button">  Privacy </a>
     <a href="#" class="button"> Services </a>
     <a href="#" class="button"> Avatar </a>
     <a href="#" class="button"> Language </a>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, you should adjust your html to include a list as follows (notice I also added id attributes): 

    <ul>
 <li><a href="#" class="button" id="profile-btn"> Profile  </a></li>
 <li><a href="#" class="button" id="privacy-btn">  Privacy </a></li>
 <li><a href="#" class="button" id="services-btn"> Services </a></li>
 <li><a href="#" class="button" id="avatar-btn"> Avatar </a></li>
 <li><a href="#" class="button" id="language-btn"> Language </a></li>
</ul>

    Then, to add the image use the following css:

     a#profile-btn {
   background-image:url(/image_path/profile.png);
 }
 a#privacy-btn {
   background-image:url(/image_path/privacy.png);
 }
 a#services-btn {
   background-image:url(/image_path/services.png);
 }
 a#avatar-btn {
   background-image:url(/image_path/avatar.png);
 }
 a#language-btn {
   background-image:url(/image_path/language.png);
 }

    And finally the rounded borders:

    ul {list-style:none;}
ul li:first-child a {
  -moz-border-radius-topleft: 25px;
  -moz-border-radius-topright: 25px;
  -webkit-border-radius-topleft:25px;
  -webkit-border-radius-topright:25px;
  border-top-right-radius:25px;
  border-top-left-radius:25px;
 }
 ul li:last-child a {
   -moz-border-radius-bottomleft: 25px;
   -moz-border-radius-bottomright: 25px;
   -webkit-border-radius-bottomleft:25px;
   -webkit-border-radius-bottomright:25px;
   border-bottom-right-radius:25px;
   border-bottom-left-radius:25px;
 }

    EDIT: This code is intended to work with all your other provided css, as long as you replace the HTML as shown.

    • 0