www.webdeveloper.com
Results 1 to 4 of 4

Thread: Button link and hover

  1. #1
    Join Date
    Sep 2006
    Posts
    192

    Button link and hover

    ISSUE:

    The .btn{} section works only if it co-exists with a:link,a:visited and a:hover,a:active. If I do so, all the <a> links across the application will be affected.

    What I truly want is that the only "This Button" to be affected, not other <a> links.

    How can I do it?


    Please see below:

    <!-- style section
    a:link,a:visited
    {
    display:block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }

    .btn {
    background: #ccc;
    text-decoration: none;
    border: 1px solid #aaa;
    border-radius: 5px;
    display: inline-block;
    padding: 3px 6px
    }
    -->
    ...
    ...

    <a href="whatever.html" class="btn">This Button</a>

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Why not just apply the styles to the .btn class instead of all the <a> tags:

    Code:
    .btn:link, .btn:visited {
    	display:block;
    	font-weight:bold;
    	color:#FFFFFF;
    	background-color:#98bf21;
    	width:120px;
    	text-align:center;
    	padding:4px;
    	text-decoration:none;
    }
    .btn:hover, .btn:active {
    	background-color:#7A991A;
    }
    .btn {
    	background: #ccc;
    	text-decoration: none;
    	border: 1px solid #aaa;
    	border-radius: 5px;
    	display: inline-block;
    	padding: 3px 6px
    }
    Code:
    <a href="#">Test</a>
    <a href="whatever.html" class="btn">This Button</a>
    <a href="#">Test</a>

  3. #3
    Join Date
    Sep 2006
    Posts
    192

    resolved

    Is there a feature to grade the answer on this forum?

  4. #4
    Join Date
    Aug 2012
    Posts
    4
    Woo! You also answered the question I was about to post, bionoid. Thank yoou!!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles