please can you check my image tha is attached I have a problem moving my button to right upper corner
for some reasons it stick in left upper corner**
and when i start moving my button , all other element moves around**
.ph-button {
border-style: solid;
border-width: 0px 0px 3px;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
color: #FFFFFF;
border-radius: 2px;
cursor: pointer;
display: inline-block;
font-style: normal;
overflow: hidden;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
transition: all 200ms ease-in-out 0s;
white-space: nowrap;
font-family: "Gotham Rounded A","Gotham Rounded B",Helvetica,Arial,sans-serif;
font-weight: 700;
padding: 9px 19px 9px;
font-size: 18px;
}
/*Red
==========================*/
.ph-btn-red {
background-color: #ED5A5A !important;
border-color: #EA4343 !important;
}
.ph-btn-red:hover, .ph-btn-red:focus, .ph-btn-red:active {
background: none repeat scroll 0 0 #EB4848 !important;
border-color: #E83131 !important;
}
<div class="ph-container">
<div class="ph-float">
<a href='#' class='ph-button ph-btn-red'>Ask Question</a>
</div>
</div>
<div class="ph-clear"></div>
this is how it looks now
.ph-container{
text-align: right;
}
This should do the trick
.ph-button {
border-style: solid;
border-width: 0px 0px 3px;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
color: #FFFFFF;
border-radius: 2px;
cursor: pointer;
font-style: normal;
overflow: hidden;
float: right;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
transition: all 200ms ease-in-out 0s;
white-space: nowrap;
font-family: "Gotham Rounded A","Gotham Rounded B",Helvetica,Arial,sans-serif;
font-weight: 700;
padding: 9px 19px 9px;
font-size: 18px;
}
/*Red
==========================*/
.ph-btn-red {
background-color: #ED5A5A !important;
border-color: #EA4343 !important;
}
.ph-btn-red:hover, .ph-btn-red:focus, .ph-btn-red:active {
background: none repeat scroll 0 0 #EB4848 !important;
border-color: #E83131 !important;
}
<div class="ph-container">
<div class="ph-float">
<a href='#' class='ph-button ph-btn-red'>Ask Question</a>
</div>
</div>
<div class="ph-clear"></div>
Related
so I have created button with on hover changes style and when I click it it fades Out by Jquery script
and problem is when mouse is hovered on button and then clicked fadeOut animation stops and bugs out
skips it half way it doe's not happens when button has no css hover code in it soo I want it to not skip fade and also work on hover.
here is code.
$(document).ready(function() {
$("#myButton").click(function() {
$("#myButton").fadeOut(300);
});
});
.Main_button_Join {
width: 200px;
height: 100;
margin-top: 30px;
border-radius: 5px;
background-color: transparent;
border-style: solid;
border-color: transparent;
outline: none;
font-size: 5rem;
text-align: end;
font-family: 'Anton', sans-serif;
letter-spacing: 10px;
color: whitesmoke;
text-shadow: skyblue 2px 2px 20px;
box-shadow: 0 10px 2px -2px whitesmoke;
padding: 10px;
cursor: pointer;
}
.Main_button_Join:hover {
transition: 1s;
text-shadow: rgb(143, 40, 0) 4px 4px 30px;
border-color: transparent;
color: rgb(252, 0, 0);
box-shadow: 0 10px 2px -2px rgba(0, 0, 0, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myButton" class="Main_button_Join" type="button" align="center">Join</button>
it needed div button could not function with hover and fade out together soo now instead div fadesout button and it works just fine.
Join
Not sure is this what you looking for ? I change jQuery fade out to class, with transition
$(document).ready(function() {
$("#myButton").click(function() {
$("#myButton").addClass("fadeOut");
});
});
.Main_button_Join {
width: 200px;
height: 100;
margin-top: 30px;
border-radius: 5px;
background-color: transparent;
border-style: solid;
border-color: transparent;
outline: none;
font-size: 5rem;
text-align: end;
font-family: 'Anton', sans-serif;
letter-spacing: 10px;
color: whitesmoke;
text-shadow: skyblue 2px 2px 20px;
box-shadow: 0 10px 2px -2px whitesmoke;
padding: 10px;
cursor: pointer;
transition:0.3s all ease;
}
.Main_button_Join:hover {
transition: 1s;
text-shadow: rgb(143, 40, 0) 4px 4px 30px;
border-color: transparent;
color: rgb(252, 0, 0);
box-shadow: 0 10px 2px -2px rgba(0, 0, 0, 0);
}
.Main_button_Join.fadeOut{
opacity:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myButton" class="Main_button_Join" type="button" align="center">Join</button>
I found this a nemorphism toggle and can´t figure out how to change the background if checked. I am aware how basic this question is. I did it several times with basic toggle checkboxes but it seems either I am confused or this design pattern is ignoring my attempts.
So far I tried different solutions as:
input[type="checkbox"]:checked {
background: red
}
or
.toggle:checked {
background: red
}
Unfortunately none of them does the job. I am aware its a basic question and thought you guys could direct me to the correct solution as I am struggling.
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
input[type=checkbox] {
background: yellow
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="label">
<div class="toggle">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>
You're trying to apply background on the input but the indicator class is overriding it. Why not give the property to the indicator class itself?
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
input[type=checkbox] {
background: yellow
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
background: red;
}
<label class="label">
<div class="toggle">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>
You don't have to put the input inside the div, you can put it before it and as long as it's in the label it will work fine. And then you can update the selectors
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
transition: background 0.3s ease;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
input[type=checkbox] +.toggle { /* Now you can select the div next to the input */
background: yellow
}
.toggle-state:checked + .toggle {
background: red;
}
.toggle-state:checked + .toggle .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="label">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="toggle">
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
input[type=checkbox]:checked ~ .indicator {
background: red;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="label">
<div class="toggle">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>
I'm having some issues with my code.
I added this button to my HTML page and CSS with the styling of the button class and the hover effect:
.buton4e {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
cursor: pointer;
font-size: 16px;
}
.buton4e:hover {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
font-size: 16px;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 40px 0 rgba(0, 0, 0, 0.19);
}
.intro-header {
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
color: #f8f8f8;
background: url(../img/background.jpg) no-repeat center center;
background-size: cover;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message>h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 5em;
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.intro-message>h3 {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
<!-- Header -->
<header class="intro-header">
<div class="container">
<div class="intro-message">
<br /><br /><br />
<h3>90% of IT companies believe they need to partner to grow.<br /> Join <b>Channeliser</b> - the global network for building IT partnerships.</h3>
<hr class="intro-divider">
<button class="buton4e">JOIN FOR FREE</button>
</div>
</div>
</header>
The problem is that the effect works when I hover the button but there when the button is static it has no styling
*EDIT:
Sorry for not posting all the code.
This should be sufficient for the things I'm trying to modify.
Thanks in advance.
.styledButton {
font-family: Arial;
width: 100px;
height: 50px;
color: black;
background-color: grey;
border: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.styledButton:hover {
color: white;
background-color: black;
}
.styledButton:active {
opacity: 0.5;
}
<button class = "styledButton">Click Me!</button>
This should help. Any click animations I have trouble with.
Here's the demo: https://jsfiddle.net/krycLxb0/
The way this is set up is so that to create the illusion that the button is pressed, the padding of the outer container (.button) is changed, making the top padding more than the bottom. However, when this is activated, the other button seems to shrink down as well. Why does this happen, and how do I fix it?
Here's the source:
header {
letter-spacing: .04em;
font-weight: 900;
font-family: sans-serif;
}
.button {
padding: 4px;
padding-bottom: 12px;
border-radius: 6px;
display: inline-block;
transition: 300ms ease;
will-change: auto;
text-transform: uppercase;
text-align: center;
font-size: 14px;
text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2);
}
.button span {
display: inline-block;
width: 10em;
padding: 1.2em;
border-radius: 2px;
background: #FF4A50;
}
.button:hover {
box-shadow: 0px 6px 0px 0px rgba(0, 0, 0, 0.2);
}
.button:active {
transition: none;
padding-top: 12px;
padding-bottom: 4px;
}
.button--filled {
background: #BC2E56;
color: white;
}
.button--filled span {
background: #FF4A50;
}
.button--dark {
background: rgba(65, 57, 76, 0.6);
}
.button--dark span {
background: #FFF8F2;
}
<header>
<a class="button button--filled" href="#"><span>Get Started</span></a>
<a class="button button--dark" href="#"><span>Learn more</span></a>
</header>
Because your buttons are now vertical-align: baseline. Just add vertical-align: top; to your .button. See fiddle
I am new to styling. When I was searching for styling buttons, I came to know about this "Graphic Button". How do I include graphic buttons in my page.
<button type="button">
<img src="graphic.png" alt="alternative text">
</button>
just use css and go through background etc, example, just to show you how much you can do
.btn, input[type="button"] {
/*border-style: solid;
border-width: 1px;*/
cursor: pointer;
font-family: inherit;
font-weight: bold;
line-height: 1;
margin: 0 0 1.25rem;
position: relative;
text-decoration: none;
text-align: center;
display: inline-block;
padding-top: 0.75rem;
padding-right: 1.5rem;
padding-bottom: 0.8125rem;
padding-left: 1.5rem;
font-size: 1rem !important;
background: none;
/*border-color: #2bacd1;*/
color: white;
border-radius: 0px 0px 8px 0px;
/*-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;*/
/*-webkit-transition: background-color 100ms ease-out;
-moz-transition: background-color 100ms ease-out;
transition: background-color 100ms ease-out;*/
-webkit-appearance: none;
min-width: 95px;
}