Round link with centered text and active area only the circle - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Text

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Text

Description

Round link with centered text and active area only the circle

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
a {<!--from   w ww  . j  a v a 2 s  .c o m-->
   display:inline-block;
   border-radius:81px;
   height:81px;
   width:81px;
   background:red;
   padding-top:26px;
   text-align:center;
   box-sizing:border-box;
}
</style> 
 </head> 
 <body> 
  <a href="#">Lorem ipsum dolor</a>  
 </body>
</html>

Related Tutorials