Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Designing The Link Text Inside of a Button

    Hello,

    I've created a link button, but I'm having difficulty tinkering with the text inside the button. I'm not sure what colors I want yet, but I can't even experiment with them right now. I'm going to want to change the visited link color and possibly the font.

    I apologize, but the site is not up yet. I can only post the code.

    CSS:



    div {
    height: 50px;
    width: 120px;
    border: 10px groove #000000;
    background-color: #e7a61a;
    border-radius: 20px;
    margin: auto;
    text-align: center;
    link-color: #FF0000;

    }

    HTML:
    <body>
    <center><b><h1>Welcome to the Unitarian Universalist Community of El Paso</h1></b></center>
    <div><a href="http://www.uuelpaso.org/whoweare.html">Who We Are</a></div>
    </body>


    Thank you for any and all help,
    David

  • #2
    New Coder
    Join Date
    Dec 2013
    Posts
    14
    Thanks
    1
    Thanked 1 Time in 1 Post
    Use the following selectors in your css:

    a { insert styles here }
    a:link { insert styles here }
    a:visited { insert styles here }
    a:hover { insert styles here }
    a:active { insert styles here }

    Use them in the same order.

    Set text-decoration to none to remove underline, other text based styles can be used on these selectors also.

    Hope this helps.

  • Users who have thanked GriffithsWebDes for this post:

    dvirden (07-11-2014)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,581
    Thanks
    23
    Thanked 644 Times in 643 Posts
    @dvirden
    You do not have a button. You have an anchor. If you want a button use this:
    Code:
    <a href="http://www.uuelpaso.org/whoweare.html"><input type="button" value="Who We Are" /></a>
    PS, <center> is way old and not to be used. Center things using CSS.
    If you have more than the whoweare.html page to show you might want to consider a menu to start things off.
    This is a large under taking so if you would like some help PM me here.

    Sample page:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Unitarian Universalist Community of El Paso</title>
    <style type="text/css">
    *, body{
    	margin: 0;
    	padding: 0;
    	width: 100%;
    }
    #header{
    	width: 850px;
    	margin: 0 auto;
    }
    input {
    	color: #FF0000;
    }
    a{
    	 text-decoration: none;
    
    }
    #anchor{
    	width: 90px;
    	margin: 0 auto;
    }
    </style>
    </head>
    
    <body>
    <div id="header">
    	<b><h1>Welcome to the Unitarian Universalist Community of El Paso</h1></b>
    	<div id="anchor"><a href="http://www.uuelpaso.org/whoweare.html"><input type="button" value="Who We Are" /></a></div>
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    dvirden (07-11-2014)

  • #4
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks to both of you. I was going by the guide on Code Academy. I have about 8 internal links, so I guess a menu bar would be much classier. I'll start working on it tonight and message you if I have anymore questions.

  • #5
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    2
    Thanks
    0
    Thanked 1 Time in 1 Post
    you should write and learn to write the following way. it is very professional and Seo standard.
    <a href="http://www.uuelpaso.org/whoweare.html"><input type="button" value="Who We Are" /></a>
    Css demo : Xeeng online

  • Users who have thanked xeeng for this post:

    dvirden (07-11-2014)


  •  

    Posting Permissions

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