menu with corner border effect css
Sun Feb 13 2022 06:14:11 GMT+0000 (UTC)
Saved by
@developerchef
#html
#css
#javascript
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
.snip1241 {
font-family: 'Raleway', Arial, sans-serif;
text-align: center;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
}
.snip1241 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1241 li {
display: inline-block;
list-style: outside none none;
margin: 0.5em 1em;
padding: 0;
}
.snip1241 a {
padding: 0.5em 0.8em;
color: rgba(255, 255, 255, 0.5);
position: relative;
text-decoration: none;
}
.snip1241 a:before,
.snip1241 a:after {
height: 14px;
width: 14px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
.snip1241 a:before {
right: 0;
top: 0;
border-right: 3px solid #9b59b6;
border-top: 3px solid #9b59b6;
-webkit-transform: translate(-100%, 50%);
transform: translate(-100%, 50%);
}
.snip1241 a:after {
left: 0;
bottom: 0;
border-left: 3px solid #9b59b6;
border-bottom: 3px solid #9b59b6;
-webkit-transform: translate(100%, -50%);
transform: translate(100%, -50%);
}
.snip1241 a:hover,
.snip1241 .current a {
color: #ffffff;
}
.snip1241 a:hover:before,
.snip1241 .current a:before,
.snip1241 a:hover:after,
.snip1241 .current a:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
/* Demo purposes only */
body {
background-color: #212121;
}
<ul class="snip1241">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
content_copyCOPY
Comments