Tutorial : Navitigation Style

Link1 Link2 Link3 Link4

  - Live Preview -

<style> a.jeonjin { display:inline-block; -webkit-transition: 0.4s; -moz-transition: 0.4s; padding-top:15px; padding-bottom:5px; border-top-right-radius:40px; border-top-left-radius:40px; width:70px; text-decoration:none; font-family:calibri; font-size:10px; height:20px; text-transform:uppercase; color: #fff; background: #FFD1D1; text-align:center; cursor:vertical-text; } a.jeonjin:hover{ color: #fff; -webkit-transition: 0.4s; -moz-transition: 0.4s; -webkit-transform: rotateX(180deg) ; -moz-transform: rotateX(180deg) ; -o-transform: rotateX(180deg) ; -ms-transform: rotateX(180deg) ; background:#FFDFDF;} </style> <center> <div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiawAQmKGJo-QXBvPwiS4fMegTI5FhsNfkrli83EIUSgOH_JFjqwMM90EBZ2L1UTxemy4YPv71UmM350NtHxyDbSPMM8ZLVXGyL1jz84Z9QC-setC4sa_YDvprFJNHXXvoG6WHlLrxdbwU/s1600/pink.png);width:500px;border:1px dashed pink; padding:5px;margin-bottom:0px;border-radius:10px; "> </div> <a class="jeonjin" href="LINK">Link1</a> <a class="jeonjin" href="LINK">Link2</a> <a class="jeonjin" href="LINK">Link3</a> <a class="jeonjin" href="LINK">Link4</a> <div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiawAQmKGJo-QXBvPwiS4fMegTI5FhsNfkrli83EIUSgOH_JFjqwMM90EBZ2L1UTxemy4YPv71UmM350NtHxyDbSPMM8ZLVXGyL1jz84Z9QC-setC4sa_YDvprFJNHXXvoG6WHlLrxdbwU/s1600/pink.png);width:500px;border:1px dashed pink; padding:5px;margin-bottom:4px;border-radius:10px; "> </div> </center>