I'd like to know if this is possible with css only how

Hello,
I'd like to know if this is possible with css only how to create a clickable button in all its back up.
a clickable <div>
and remove all the underlining of links.
as the buttons in the frame screenshot of the wordpress.com page.

  Thank you.

  • Ash
    • WordPress Hacker

    I know almost nothing in Java Script lol

    No problem :slight_smile: I will try to help you my level best.

    Would you please share me a link and screenshot where you want to put a link? Also it's 0815 here, so I am off to bed. I will answer you at the evening :slight_smile:

    Cheers
    Ash

  • mondoha13
    • The Incredible Code Injector

    Thank You Ashok
    this is the PHP Code

    <div id="inscript">
    
    	<?php printf( __( '<a href="%s" title="Create an account">INSCRIPTION</a>', 'buddypress' ), bp_get_signup_page() ); ?>
    
    	</div>

    and the CSS code:

    div#inscript {
    
        margin-top: 20px;
        padding: 5px;
    	-moz-box-shadow:inset 0px 1px 6px 1px #dcecfb;
    	-webkit-box-shadow:inset 0px 1px 6px 1px #dcecfb;
    	box-shadow:inset 0px 1px 6px 1px #dcecfb;
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea) );
    	background:-moz-linear-gradient( center top, #bddbfa 5%, #80b5ea 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa', endColorstr='#80b5ea');
    	background-color:#bddbfa;
    	-webkit-border-top-left-radius:3px;
    	-moz-border-radius-topleft:3px;
    	border-top-left-radius:3px;
    	-webkit-border-top-right-radius:3px;
    	-moz-border-radius-topright:3px;
    	border-top-right-radius:3px;
    	-webkit-border-bottom-right-radius:3px;
    	-moz-border-radius-bottomright:3px;
    	border-bottom-right-radius:3px;
    	-webkit-border-bottom-left-radius:3px;
    	-moz-border-radius-bottomleft:3px;
    	border-bottom-left-radius:3px;
    	text-indent:0px;
    	border:1px solid #84bbf3;
    	display:inline-block;
    	color:#ffffff;
    	font-family:Arial;
    	font-size:25px;
    	font-weight:bold;
    	font-style:normal;
    	height:40px;
    	line-height:40px;
    	width:106.5%;
    	mon-width:310px;
    	text-align:center;
    	text-shadow:1px 3px 7px #528ecc;
    }
    
    div#inscript a { /* Les liens qui ne sont pas sous le curseur. */
    	color: #fff; //ta couleur
    	text-decoration: none; // pas de soulignement
    	font-family:Arial,Verdana; // la font du texte
    	line_height:300px;
    
    	}
    
    div#inscript a:hoover { /* Les liens lorsque le curseur est dessus. */
    	color: #FFFFFF; //ta couleur
    	text-decoration:none; // pas de soulignement
    	font-family:Arial,Verdana; // la font du texte
    }
    div#inscript a:visited { /* Les liens visités. */
    	color: #FFFFFF; //ta couleur
    	text-decoration:none; // pas de soulignement
    	font-family:Arial,Verdana; // la font du texte
    }
    
    div#inscript:hover {
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #bddbfa) );
    	background:-moz-linear-gradient( center top, #80b5ea 5%, #bddbfa 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80b5ea', endColorstr='#bddbfa');
    	background-color:#80b5ea;
    }
    div#inscript:active {
    	position:relative;
    	top:1px;
    
    	}

    Thank you Ash

  • Ash
    • WordPress Hacker

    Hi there, if the above code is perfect then change css for div#inscript a to below:

    div#inscript a{
    color: #fff;
    text-decoration: none !important;
    font-family:Arial,Verdana;
    line-height:30px;
    text-align: center;
    display: inline-block;
    background: red;
    padding: 0 15px
    }

    If the above solution doesn't work for you, then I am requesting again to share a link so that I can get a clear idea as I mentioned in the above post :slight_smile:

    FYI,
    1. line_height is not a correct attribute
    2. Do comment out in css with // as it will produce a css error. Always use /* */

    Please let me know if it is helpful and feel free to ask more question if you have.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.