SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Adelaide, Australia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS button style

    Hi guys,

    Just wondering how you would create this button with just CSS (image attached)?

    I can't work out how to get the border inside the button.

    Any help is greatly appreciated.

    Cheers
    Jed

    Screen shot 2012-10-22 at 10.43.20 AM.png

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,322
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    You might have to wrap one element inside another to get that. E.g.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Link</title>
    	
    <style media="all">
    a, span {
    	display: inline-block;
    }
    
    a {
    	background: #4e95be;
    	color:white;
    	font-size: 0.75em;
    }
    
    a:hover {
    	background: #2376a6;
    }
    
    span {
    	padding: 10px 20px;
    	margin: 5px;
    	border: 1px solid white;
    }
    </style>
    	
    </head>
    
    <body>
    
    <p><a href=""><span>VIEW ALL</span></a></p>
    
    </body>
    
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Adelaide, Australia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph – that's great...

    Thanks for your assistance.

    Jed


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •