<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <style> /* Add a black background color to the top navigation */ .topnav { background-color: #feba01; overflow: hidden; } /* Style the links inside the navigation bar */ .logo { float: left; height: 100px; width: 100px; text-align: center; } .topnav p { vertical-align: middle; float: left; color: #fff; text-align: center; text-decoration: none; font-size: 25px; font-weight:700; margin-top:38px; margin-left:25px; } /* Right-aligned section inside the top navigation */ .topnav-right { float: right; margin-top:55px; } .button-default { color: white; background-color: teal; text-align: center; text-transform: uppercase; display: inline-block; } .button-slanted { -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg); transform: skewX(-20deg); } .button-slanted-content { padding: 2px 10px; margin: 10px; -ms-transform: skewX(20deg); -webkit-transform: skewX(20deg); transform: skewX(20deg); display: inline-block; } </style> <div class="topnav"> <div class="logo"> <img src="data:image/gif;base64,R0lGODdhLAHIANUAAKqqqgAAAO7u7uXl5bKysru7u93d3czMzMPDw9TU1BUVFdDQ0B0dHaurqywsLHJyclVVVTc3N5SUlBkZGcHBwRYWFmpqasjIyDAwMJubm39/fyoqKhcXF4qKikJCQnd3d0ZGRhoaGoWFhV1dXVlZWZ+fn7m5uT8/Py4uLqWlpWFhYUlJSTMzM4+Pj25ubkxMTBgYGBwcHG9vbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAALAHIAAAG/kCAcEgsGo/IpHLJbDqf0Kh0Sq1ar9isdsvter/gsHhMLpvP6LR6zW673/C4fE6v2+/4vH7P7/v/gIGCg4SFhoeIiYqLjI2Oj5CRkpOUlZaXmJmam5ydnp+goaKjpKWmp6ipqqusra6vsLGys7S1tre4ubq7vL2+v8DBwsPExcbHyMnKy8zNzs/Q0dLT1NXW19jZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dx8vP09fb3+Pn6+/z9/v8AAwocSLCgwYMIEypcyLChw4cQI0qcSLGixYsYM2rcyLGjx48gQ4ocSbKkyZMoU6pcybKlS3gBYsZUIESDggAKLBCxiVOn/hQNG2JCKMIz55CiPlUKWLqAQQMAEjg0ENAggAYhUadWvRoFhIsFC14kzUrVKlSpZbmydPCgAAAPbQEU+ABCCFy3c+tGSXCAAIEEMIbclUv3bdy8LSFEOCAkBIEhBEI0fiwkspETajWcSCIhxhDHkCWDrix5pYQJFIYEoAwgQwAhq4e4NpIAhQSoKBIkkTEUNuvZsYXMXukgQAWfryEnT16ZOZEUDiQ4SJ0EhgnVRAi8dq6dpQEBFzDoDHAbOwDyRJwPKdAhQAfWRiBAYI0ee33YLglQeM1AxBAJDAjR338BHqECCSskocEE1w0xIFYBPghVgS1lECAEIwxBQm8Y+WrYG1EsJGCBWkRkBV+HQmwIAIoAqNiSBg48VYJZCzY441U1GhFVagfYZoQDLbhFxI0A5EhkjioFFQAHHeAV1ZINUFbAk1LBZ1cLlKXgQRFKyrQelVHKBaaVJn0nwAAIDIHAAGcKKcSabR6RQJpCFKAbEWYuJQARcA7gZp9uviTooIQWauihiCaq6KKMNuroo5BGKumklFZq6aWYZqrpppx26umnoIYq6qiklmrqqaimquqqrLbq6quwxirrrLTWauutuOaq66689urrr8AGK+ywxBZr7LHIJqvsssw26+yz0EYr7bTUVmvttdhmq+223Hbr7bfghhtPEAA7" style="width:100%" "height:100%"></div> <p>CSD CyberSecurity Division Portal</p> <div class="topnav-right"> <div class="button-default button-slanted"> <span class="button-slanted-content">Slanted Button</span> </div> <div class="button-default button-slanted"> <span class="button-slanted-content">Slanted Button</span> </div> </div> </div>

<style> .button-default { color: white; background-color: teal; text-align: center; text-transform: uppercase; display: inline-block; } .button-secondary { color: white; background-color: black; text-align: center; text-transform: uppercase; display: inline-block; } .button-slanted-content { -ms-transform: skewX(20deg); -webkit-transform: skewX(20deg); transform: skewX(20deg); display: inline-block; } .doubleslant { width: 300px; height:82px; -ms-transform: skewX(-30deg); -webkit-transform: skewX(-30deg); -o-transform: perspective(300px) rotateX(30deg); transform: skewX(-30deg); } .oneslant { width: 300px; height:100px; -webkit-transform: perspective(300px) rotateX(30deg); -o-transform: perspective(300px) rotateX(30deg); -moz-transform: perspective(300px) rotateX(30deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } </style> </style> <div class="button-default doubleslant"></div><div class="button-secondary oneslant"></div>