I have this CSS for a button-
a.button {
border-top: 1px solid #7f93bc;
background: #7f93bc;
background: -webkit-gradient(linear, left top, left bottom, from(#7f93bc), to(#7f93bc));
background: -moz-linear-gradient(top, #7f93bc, #7f93bc);
padding: 10.5px 21px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 18px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
a.button:hover {
border-top-color: #0e1f5b;
background: #0e1f5b;
color: #ffffff;
}
a.button:active {
border-top-color: #0e1f5b;
background: #0e1f5b;
}
The below turns out a link. I want to make it turn out a button in the above style. What can I replace the below with?
$theOffers .= "<br><li class=\"gateway-offer\">$offer[name]</li><br>";
Just add the class to the tag:
...ffer\"><a class=\"button\" href=\"http://fakeurlf...
Looks like you just need to add class="button" to your anchor tag, like so:
$theOffers .= "<br><li class=\"gateway-offer\"><a class=\"button\" href=\"http://fakeurlforanon/aff_c?offer_id=".$offer['id']."&aff_id=$affiliateId\" target=\"_blank\">$offer[name]</a></li><br>";
That should make it pick up all the button styling you already have.
You forgot to actually specify that the <a> should be of class button.
$theOffers .= '
<br />
<li class="gateway-offer">
<a class="button" href="http://fakeurlforanon/aff_c?offer_id=' . $offer["id"] . '&aff_id=' . $affiliateId. '" target="_blank">' . $offer["name"] . '</a>
</li><br />';
Related
This is all my code (the code seems very messy because I just started learning about 2/3 weeks ago). I cant seem to style the anchor elements. I even tried putting a class on them and it also doesn't works. I'm kinda new to this thing.
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Merriweather:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#500&display=swap');
body {
height: 100%;
margin: 0;
padding: 0;
background: #bbb;
}
.ex-house {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
opacity: 0.8;
}
.house-dh {
position: absolute;
top: -20%;
left: 2%;
padding: 0px;
margin: 0px;
color: rgb(255, 255, 255);
font-family: 'Bree serif';
font-size: 125px;
text-align: center;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.about-gnco1 {
position: absolute;
color: rgb(255, 255, 255);
font-family: 'Inter';
font-size: 35px;
text-align: left;
margin: 0px;
padding: 0px;
left: 2%;
top: 20%;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
/* this is my code for the style element i think i did it right but when i run it. the a href element dosent change */
.front-button {
font-family: 'Bebas Neue';
font-size: 20px;
color: white;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.front-button a {
margin: 0 20px;
}
<body>
<div class="front">
<img class="ex-house" src="https://via.placeholder.com/80" alt="dreamhouse">
<div class="house-dh">
<p>grandnew.co</p>
</div>
<div class="about-gnco">
<p class="about-gnco1">Is here to help you<br> build your own<br> Dream House.</p>
</div>
</div>
</div>
<div class="front-button">
CUSTOMIZE
DESIGNS
PLANS
ABOUT US
</div>
</body>
if you mean underline of link for that you can use the method text-decoration for examplea{text-decoration:none} this code will remove any decorations of a tag so if you wanna use this function for all a tags you will write a{text-decoration:none} so if you wanna set decoration of specific tag you can give a class on the tag before you can change something example
HTML
go to stackoverflow
<a class="a-tag" href="https://stackoverflow.com">go to stackoverflow</a>
CSS
a{ //for all <a> tags
text-decoration:none
}
.a-tag{ // only for tag who have the a-tag class
text-decoration:none
color:black;
}
This works for me. The style of the text in the '.front-button a', not in '.front-button'
.front-button a {
margin: 0 20px;
font-family: 'Bebas Neue';
font-size: 20px;
color: red;
text-shadow: 2px 2px 3px rgba(241, 238, 53, 0.5);
}
link style
More about link styles:
https://www.w3schools.com/css/css_link.asp
How do I change link style in CSS?
I am working on a sheet music catalog. Available sheets are listed on an ordered list and when hovering on "view", a pop-up preview image shows. I noticed that as you scroll down previewing each sheet, certain elements from the < li > items below the current one can be seen through the image. I am sure this has to do with the stacking context/order or even with a missing 'position' somewhere, but I can't figure it out.
I have the scenario here: http://jsfiddle.net/4BwBX/
HTML:
<div id="SheetMusicStore">
<ol class="enlarge">
<li>
<span class="view">[ view ]</span>
<span class="preview"><img src="http://www.antonioromo.com/newsite/images/01gnw-tn.png" alt="Just Another Dusk" /><br />Just Another Dusk (Good Night Wishes)</span>
<span class="name">Just Another Dusk (Good Night Wishes)</span>
<span class="price">$3.99 BUY</span>
</li>
<li>
<span class="view">[ view ]</span>
<span class="preview"><img src="http://www.antonioromo.com/newsite/images/02gnw-tn.png" alt="My Nightlight" /><br />My Nightlight (Good Night Wishes)</span>
<span class="name">My Nightlight (Good Night Wishes)</span>
<span class="price">$3.99 BUY</span>
</li>
<li>
<span class="view">[ view ]</span>
<span class="preview"><img src="http://www.antonioromo.com/newsite/images/03gnw-tn.png" alt="Whisper of Love" /><br />Whisper of Love (Good Night Wishes)</span>
<span class="name">Whisper of Love (Good Night Wishes)</span>
<span class="price">$3.99 BUY</span>
</li>
</ol>
</div>
CSS:
/** Sheet Music Store **/
#SheetMusicStore {
width: 500px;
margin: 40px auto;
}
ol.enlarge{
margin-left:0;
font-family: 'Trebuchet MS', Helvetica, Tahoma, Arial, Sans-serif;
font-size: 1em;
color: #999;
padding: 10px 20px;
box-shadow: inset 0 2px 2px #582E58;
border-radius: 6px;
background: url(http://www.antonioromo.com/newsite/images/sheet-bg.png) repeat 0 0 scroll;
color: #AAA;
}
ol.enlarge li{
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
background: transparent url(http://www.antonioromo.com/newsite/images/sheet-item-bg.png) repeat-x bottom left scroll;
padding: 5px 0 7px 0;
list-style-position: inside;
font-size: 12px;
}
ol.enlarge img{
background-color: #eae9d4;
padding: 6px;
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
border-radius: 4px;
}
ol.enlarge span.preview{
position: absolute;
left: -9999px;
background-color: #eae9d4;
padding: 10px;
font-family: 'Trebuchet MS', Helvetica, 'Droid Sans', sans-serif;
font-size: .9em;
text-align: center;
color: #495a62;
box-shadow: 0 0 20px rgba(0,0,0, .75);
border-radius: 8px;
}
ol.enlarge li:hover{
color: #EEE;
}
ol.enlarge li:hover .view{
color:#FFFFCC !important;
}
ol.enlarge .view:hover{
cursor: pointer;
}
ol.enlarge span.preview img{
padding: 2px;
background: #ccc;
}
span.view:hover ~ span.preview{
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: 300px; /*distance from the left of the thumbnail to the left of the popup image*/
z-index: 50;
}
ol.enlarge .price {
width: 62px;
height: 16px;
position: absolute;
top: 7px;
right: 0;
border-radius: 8px;
background: transparent url(http://www.antonioromo.com/newsite/images/buy-bg.png) repeat 0 0 scroll;
margin: 0 0 0 10px;
font-size: 10px;
text-align: center;
line-height: 16px;
text-shadow: none;
color: #BBB;
text-decoration: none;
}
ol.enlarge .price:hover {
color: #EEE;
cursor: pointer;
}
I need the preview image to be on top of anything else. Thank you in advance for your help!
I fixed this by removing the z-index:0; declaration from ol.enlarge li:
ol.enlarge li{
position: relative;
/*z-index: 0; */ /*resets the stack order of the list items - later we'll increase this*/
text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
background: transparent url(http://www.antonioromo.com/newsite/images/sheet-item-bg.png) repeat-x bottom left scroll;
padding: 5px 0 7px 0;
list-style-position: inside;
font-size: 12px;
}
JSfiddle
Z-index is still a bit of a dark art to me, but I believe that by declaring z-index: 0 you were taking the li out of the natural stacking order (which is actually what you wanted in this case, since they merely serve as an "anchor" for your .preview images). This was causing each li to "stack" on top of each other – albeit in a different order than the normal top down flow – and that was why you the content of the li above the hovered li was visible.
Hi i want to style an input submit button which has a background as given in the attached image.The back ground image was provided, but im not sure how to implement it in the submit button so instead of using that image i tried using the css 3 color gradient properties to style the button,however, i cant get the desired color output.Any help is welcome.
CSS code so far.
.button {
-moz-border-radius: 18px;
-moz-box-shadow: #fffff 0px 0px 11px;
-webkit-border-radius: 18px;
-webkit-box-shadow: #6E7849 0 0 10px;
background-color: #fefefefe;
background-image: -moz-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -ms-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -o-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -webkit-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: linear-gradient(24deg, #d8d8d8, #fefefefe);
border-radius: 18px;
border: 1px solid #888888;
box-shadow: #fffff 0px 0px 11px;
color: #000000;
display: inline-block;
font-size: 3em;
margin: auto;
padding: 4px;
text-decoration: none;
}
Use the image. Matching the gradient fully to the image is an unnecessary pain:
.button {
display:block;
width:50px; //use actual image width
height:50px; // use actual image height
background:url(../img/button.png); //image file path
}
.button:hover {
background:url(../img/button_hover.png);
}
To use an image as the input is very simple:
<input type="image"src="/images/submit.gif" />
Finally i found the way to make this button using sliding door technique.However still in jeopardy to style it in disabled state.
This link helped me alot http://www.springload.co.nz/love-the-web/dynamic-submit-buttons
css
div.submit_button {
background: transparent url('common/images/bg-submit2.png') no-repeat 0 0;
display: block;
float: left;
height: 27px; /* total height of the button */
padding-left: 15px; /* end width */
}
span.submit_button_end {
background: #fff url('common/images/bg-submit2.png') no-repeat 100% 0; /* used a sprite image */
display: block;
float: left;
font-weight: normal;
height: 27px; /* total height of the button */
}
input.submit_input {
font-size: 13px;
font-weight:bold;
background: none;
border: none;
padding: 0 0 2px 15px; /* end width */
color: #1b1d60;
cursor: pointer;
position: relative;
height: 25px;
line-height: 25px;
left: -15px;
margin-right: -15px;
padding-right: 15px;
}
input.submit_input:hover {color: #fff;}
div.submit_button:hover {background-position: 0 100%;}
div.submit_button:hover span.submit_button_end {background-position: 100% 100%;}
HTML
<div class='submit_button'>
<span class='submit_button_end'>
<input class='submit_input' type='submit' value='Submit button' tabindex='#' />
</span>
</div>
I'm trying to make some beauty search box with css.
On chrome, this works fine, but on FF the search button is broken..
<form class="form-wrapper cf" action="" method="post">
<input type="search" placeholder="O que voce procura?" required>
<button type="submit">BUSCAR</button>
</form>
my input field css:
/* Form text input */
.form-wrapper input {
width: 230px;
height: 30px;
padding: 0px 10px 0px 30px;
padding-top:5px\9;
float: left;
font: 16px 'Maven Pro', Arial, Tahoma, serif;
color:#959595;
border: 0;
background: #eee url(imagens/lupa.png) no-repeat;
background-position:5px center;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff url(imagens/lupa.png) no-repeat;
background-position:5px center;
/*box-shadow: 0 0 2px rgba(0,0,0,.8) inset;*/
}
here is my fiddle: http://jsfiddle.net/NeRFC/
Open on Chrome and on Firefox to see the problem
How to fix it?
Just removed the width from .form-wrapper and it seems to work.
Try to add the mozilla rule to .form-wrapper input :
-moz-border-radius: 3px 0 0 3px;
Also, try to comment properly those lines:
In .form-wrapper input :
background: #eee url(imagens/lupa.png) no-repeat;
To
#background: eee url(imagens/lupa.png) no-repeat;
In .form-wrapper input:focus :
background: #fff url(imagens/lupa.png) no-repeat;
To
#background: fff url(imagens/lupa.png) no-repeat;
Maxime
I'm using CSS3 buttons for a website I'm working on. However it would appear that the CSS controlling these buttons is breaking the links it styles. If anyone could point out where I am going wrong that would be greatly appreciated.
CSS controlling buttons:
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding:5px 15px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.blue {
color: #d9eef7;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#009DD1), to(#009DD1));
background: -moz-linear-gradient(top, #009DD1, #009DD1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
color: #FFFFFF;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
And the offending links:
<div class="nav">
<a href='http://www.twantrum.com/mild.html' target="_top" class='button blue'>Mild</a>
<a href='http://www.twantrum.com/restrained.html' target="_top" class='button blue'>Restrained</a>
<a href='http://www.twantrum.com/angry.html' target="_top" class='button blue'>Angry</a>
<a href='http://www.twantrum.com/mel-gibson.html' target="_top" class='button blue'>Mel Gibson</a>
</div>
There is no error in the markup you posted.
Looking at your page itself though, i noticed this section, which produces the error:
<script type="text/javascript">
$(document).ready(function(){
$('.button').click(function(){ return false; });
});
</script>
Why this does not work is answered here: What's the effect of adding 'return false' to a click event listener?
Hope it helps.