Skip to content

CSS Red Menu


HTML CODE:

<ul>
  <li><a href="#"><span title="menu">menu</span></a></li>
  <li><a href="#"><span title="about">about</span></a></li>
  <li><a href="#"><span title="service">service</span></a></li>
  <li><a href="#"><span title="contact">contact</span></a></li>
</ul>

CSS CODE:

body{
  padding:0;
  margin:0;
    height: 100vh;
    background: linear-gradient(45deg,#262626,black)
}

ul{
  margin:0;
  padding:0;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  list-type:none;
  display:flex
}
ul li{
  display:inline-block;
  float:left;
  padding:30px 30px;
  background-color:#fff;
  border-right:1px solid grey;
  border-left:1px solid grey;
  transition:.5s
  
}
ul li a{
  color:#262626;
  text-decoration:none;
  font-size:35px;
  text-transform:uppercase;
  position: relative;
  font-family:verdana;
  display: block;
  transition:.5s
}
ul li a:hover{
  transform:scale(1.2);
  color:#fff
}
ul li:hover{
  background:#660000;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: