I'm trying to style a button by writing my own css but also using Tailwind for other styles.
My code for the button is as follows but some of the elements are crossed out.
button {
margin-left: 10px; /*crossed out*/
padding: 5px 25px; /*crossed out*/
background-color: rgba(2,68,62,1); /*crossed out*/
border: none;
border-radius: 10px;
cursor: pointer; /*crossed out*/
transition: all 0.3s ease 0s;
}
Is it because Tailwind already has default values for button? I know using !important is bad practice so how do I fix this? My html for the cta button is:
<a class="cta" href="#"><button>CONTACT</button></a>
If I reference .cta in my css, I can't change the actual CONTACT text; I wanted to use text-decoration: none.
I did set a * at the top of my css.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #b3b3b4;
}
Related
Im used my angular project for this ngx-international-phone-number, I tried to add style, but its not worked for me, anyone know how to add correctly css on this input
Look my image, button and input filed is not aligned
StackBlitz here
<international-phone-number class="mystyle form-control form-control-sm" placeholder="Enter phone number" [maxlength]="20" [defaultCountry]="'us'" name="phone_number" [allowedCountries]="['in', 'ca', 'us']"></international-phone-number>
css
.mystyle .dropbtn {
background: #2196f3;
color: white;
border: none;
cursor: pointer;
}
.mystyle .form-control {
display: block;
width: 100%;
padding: 0.4375rem 0;
font-size: 1rem;
line-height: 1.5; margin: 0px 5px;
color: #495057;
background-color: rgba(0, 0, 0, 0);
background-clip: padding-box;
border: none;
border-radius: 0;
box-shadow: none;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
You need add :host ::ng-deep { *your css* } before your style.
And change app.component.css > app.component.scss
https://stackblitz.com/edit/angular-add-style
Hope it helps you.
You can use ng-phone-number instead of ngx-international-phone-number, its basically an extension of ngx-international-phone-number but its updated and well maintained with language support and issues fixed quickly upon feedback. Flag issues is also fixed here.
Here is the link of library https://www.npmjs.com/package/ng-phone-number
I'm currently working with the WordPress theme evont and trying to do some custom css on the homepage. There is a button on the home page that is too low on the page so I tried doing some custom css to raise it.
Whenever I change the margin-top value, the button no longer clicks or animates. Can not seem to figure out what is causing this.
First picture is of the animation that happens when hovering, before touching any css.
Second picture is what happens when hovering, after touching the css.
Below is the code for the button that I could find:
.jx-month-small .event-ticket-btn {
font-size: 50px;
font-family: 'Oswald';
font-weight: 500;
text-transform: uppercase;
background: #000;
line-height: 1;
padding: 15px 80px 15px 30px;
margin-top:140px;
display: block;
position: absolute;
left: 82%;
width: 100%;
margin-left: -45px;
transition: .3s all ease-out;
}
.jx-month-small .event-ticket-btn:hover {
margin-left: -95px;
}
.jx-month-small .event-ticket-btn a {
color:#fff
}
.jx-month-small .event-ticket-btn a:hover {
color:#fff300
}
what about trying to add
bottom: 200px;
or
top: 80%;
something like that since its absolutely positioned.
would help to see the html code associated with it.
I am working on a new button styles and currently facing a challenge: my <button> CSS :hover selector is not behaving as expected.
All attempts to making it work have proven futile.
How can I possibly achieve that effectively?
Below is my code:
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif)
no-repeat;
border: 0;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background-color: #959595;
}
Simply use background for your hover; not background-color as illustrated in the snippet below:
.button_depression:hover {
background: #959595;
}
Brief summary:
background CSS property is a shorthand to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.
When working without the shorthand, the background-image property supersedes background-color and as such, setting background-color alone without abnegating it (background-image) will result in its precedence.
In other words, background-image: none; in combination with background-color: #959595; will work. (Refer to snippet below)
.button_depression:hover {
background-color: #959595;
background-image: none;
}
(background-image: unset; works well too, but can't tell if supported by all browsers)
Note that you can be achieved the same, using the background shorthand, simply as above, with background: #959595; (which I prefer: simple, less verbose, same result).
More details here ....
You can't see the button hover changing the background color due to the background image. You can set the button image to None on hover and then change the color. This might be what you want. Alternatively you can just set background to the background color you wanted. Your preference how you want to acomplish this.
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif) no-repeat;
border: 0px;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background: None;
background-color: #959595;
}
i have asp drop down list and i want to change the style of the right arrow
so , i put this line in my drop down class:
" background: url(Arrow.PNG) no-repeat right center;"
Now i want to "drow" the arrow with css3 instead of using arrow.png picture
i have this class that paint arrow:
.PaintArrow {
content: "";
display: inline-block;
width: 9px;
height: 9px;
border-width: medium 2px 2px medium;
border-style: none solid solid none;
border-color: -moz-use-text-color #D1202F #D1202F -moz-use-text-color;
box-shadow: none;
transform: rotate(45deg);
transition: border 0.2s ease-out 0s;
position: absolute;
z-index: 1000;
right: 14px;
top: 36px;
}
How can i connect this class to the background of my drop down(on the right size)??
Thanks for answers
I don't know anything about asp.net, but if normal CSS and HTML Elements work there, you could do something like the following.
Let's say your List-Element is called dropdown-li, which is a class in our case.
Then you could use the pseudo-element :before.
.dropdown-li:before {
/* All the styles you defined above in your Question. */
}
Hopefully I could help out, greetings.
Here is a demonstration-fiddle with some edited styles: http://jsfiddle.net/f79osge3/
I need to make a button look like a link using CSS. The changes are done but when I click on it, it shows as if it's pushed as in a button. Any idea how to remove that, so that the button works as a link even when clicked?
button {
background: none!important;
border: none;
padding: 0!important;
/*optional*/
font-family: arial, sans-serif;
/*input has OS specific font-family*/
color: #069;
text-decoration: underline;
cursor: pointer;
}
<button> your button that looks like a link</button>
If you don't mind using twitter bootstrap I suggest you simply use the link class.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>
The code of the accepted answer works for most cases, but to get a button that really behaves like a link you need a bit more code. It is especially tricky to get the styling of focused buttons right on Firefox (Mozilla).
The following CSS ensures that anchors and buttons have the same CSS properties and behave the same on all common browsers:
button {
align-items: normal;
background-color: rgba(0,0,0,0);
border-color: rgb(0, 0, 238);
border-style: none;
box-sizing: content-box;
color: rgb(0, 0, 238);
cursor: pointer;
display: inline;
font: inherit;
height: auto;
padding: 0;
perspective-origin: 0 0;
text-align: start;
text-decoration: underline;
transform-origin: 0 0;
width: auto;
-moz-appearance: none;
-webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height */
-webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}
/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */
#supports (-moz-appearance:none) { /* Mozilla-only */
button::-moz-focus-inner { /* reset any predefined properties */
border: none;
padding: 0;
}
button:focus { /* add outline to focus pseudo-class */
outline-style: dotted;
outline-width: 1px;
}
}
The example above only modifies button elements to improve readability, but it can easily be extended to modify input[type="button"], input[type="submit"] and input[type="reset"] elements as well. You could also use a class, if you want to make only certain buttons look like anchors.
See this JSFiddle for a live-demo.
Please also note that this applies the default anchor-styling to buttons (e.g. blue text-color). So if you want to change the text-color or anything else of anchors & buttons, you should do this after the CSS above.
The original code (see snippet) in this answer was completely different and incomplete.
/* Obsolete code! Please use the code of the updated answer. */
input[type="button"], input[type="button"]:focus, input[type="button"]:active,
button, button:focus, button:active {
/* Remove all decorations to look like normal text */
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
/* Additional styles to look like a link */
color: blue;
cursor: pointer;
text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
border: none;
padding: 0;
}
try using the css pseudoclass :focus
input[type="button"], input[type="button"]:focus {
/* your style goes here */
}
edit as for links and onclick events use (you shouldn’t use inline javascript eventhandlers, but for the sake of simplicity i will use them here):
watch and learn
with this.href you can even access the target of the link in your function. return false will just prevent browsers from following the link when clicked.
if javascript is disabled the link will work as a normal link and just load some/page.php—if you want your link to be dead when js is disabled use href="#"
You can't style buttons as links reliably throughout browsers. I've tried it, but there's always some weird padding, margin or font issues in some browser. Either live with letting the button look like a button, or use onClick and preventDefault on a link.
You can achieve this using simple css as shown in below example
button {
overflow: visible;
width: auto;
}
button.link {
font-family: "Verdana" sans-serif;
font-size: 1em;
text-align: left;
color: blue;
background: none;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
-moz-user-select: text;
/* override all your button styles here if there are any others */
}
button.link span {
text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
color: black;
}
<button type="submit" class="link"><span>Button as Link</span></button>
I think this is very easy to do with very few lines. here is my solution
.buttonToLink{
background: none;
border: none;
color: red
}
.buttonToLink:hover{
background: none;
text-decoration: underline;
}
<button class="buttonToLink">A simple link button</button>
button {
text-decoration: underline;
cursor: pointer;
}
<button onClick="javascript:window.location.href='link'">Domain</button>