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
Related
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.
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>
If I remove the float:left attribute from .action-button the transform animation doesn't work. Can you explain what is happening here?
Markup:
Are
Styles:
.action-button
{
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 8px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
.green
{
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.action-button:active
{
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
Codepen line 17: http://codepen.io/koriolis/pen/euAEg
This is because a elements are inline elements, in that they align the the parent element and do not clear either side.
When you add float: left, It changes the elements from being inline to block but also removes the clear: both and allows for elements to be aligned next to each other.
You can achieve the same effect as a float by using inline-block if you don't want the tags to float on the page.
.action-button {
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
display: inline-block;
border-radius: 8px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
CodePen Example
tag a - default display: inline
float: left - display property is set to block
when you remove float: left - a again display: inline
use display: inline-block instead float: left
body {
padding: 50px;
}
.animate {
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.action-button {
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
display: inline-block;
border-radius: 8px;
font-family:'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
.blue {
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
}
.red {
background-color: #E74C3C;
border-bottom: 5px solid #BD3E31;
text-shadow: 0px -2px #BD3E31;
}
.green {
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.yellow {
background-color: #F2CF66;
border-bottom: 5px solid #D1B358;
text-shadow: 0px -2px #D1B358;
}
.action-button:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
border-bottom: 1px solid;
}
Hello
How
Are
You?
fiddle
I'm using Chrome and I'm getting these weird transparency squares on my nav.
We tell all of our users to use chrome because we are heavily reliant on HTML5 so other browsers don't really matter.
http://html5test.com/compare/browser/chrome-33/firefox-28/ie-11/safari-7.0.html
This happens when I mouse over and then mouse out on the element.
Any way to get rid of it? or do I just have to live with it until they fix it?
Less
/* Here? */
.transition() {
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
header.site-header {
background: url(http://imgur.com/UEhaqNil.jpg) center no-repeat;
background-color: #2e2e27;
background-size: 100%;
background-position: 100% 95%;
float: left;
width: 100%;
font-family: "Economica", "Open Sans", Arial, sans-serif;
box-shadow: inset 0 0 300px rgba(0, 0, 0, 1); /* Here? */
padding: 50px 10px 10px;
.title-area {
color: rgba(255, 255, 255, 0.8); /* Here? */
float: left;
font-size: 38px;
padding: 16px 0 16px 30px;
h1 {
margin: -10px 0 0;
}
img {
height: 70px;
margin: 0 0 0 35px;
opacity: .8;
}
}
nav.nav-area {
display: block;
float: right;
margin: 80px 10px 0;
ul {
list-style-type: none;
li {
float: left;
margin: 5px;
a {
color: rgba(255, 255, 255, 0.9); /* Here? */
border-radius: 1px;
padding: 8px 10px;
font-weight: 300;
font-size: 22px;
text-transform: uppercase;
&:hover,
&:focus,
&.active {
background: #56BE8E;
color: white;
.transition(); /* Here? */
text-decoration: none;
}
}
}
}
}
}
I want to show my button in Mozilla like Chrome so please help me what will I do for it.
This is my code.
CSS:
.green {
background: linear-gradient(to bottom, #9CD645 0%, #8AC530 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #82B436;
}
.large {
font-size: 18px;
}
.btn {
border: 1px solid #82B436;
border-radius: 25px;
box-shadow: 0 1px rgba(99, 159, 8, 0.35);
color: #508400;
display: inline-block;
font-weight: bold;
padding: 3px 12px;
text-decoration: none;
text-transform: uppercase;
}
.green {
background-color: #8CC63F;
}
.btn span {
background: url("images/icon_arrows.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: block;
float: right;
height: 18px;
margin: 5px;
width: 18px;
}
HTML:
<a href="smoodees" class="btn large green">
Check out our Smoodees
<span></span>
</a>
Checkout this fiddle:
http://jsfiddle.net/realdeepak/gvC9z/1/
or For browser compatibility in firefox, you can use css hack like this:
#-moz-document url-prefix() {
.large {
font-size: 17px;
}
}
Or Try this, And fix minor css padding alignment as per your screen:
<style type="text/css">
.green {
background: linear-gradient(to bottom, #9CD645 0%, #8AC530 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #82B436;
}
.large {
font-size: 18px;
}
.btn {
border: 1px solid #82B436;
border-radius: 25px;
box-shadow: 0 1px rgba(99, 159, 8, 0.35);
color: #508400;
display: inline-block;
font-weight: bold;
padding: 3px 30px 3px 10px;
text-decoration: none;
text-transform: uppercase;
position: relative;
}
.green {
background-color: #8CC63F;
}
.btn span {
background: url("images/icon_arrows.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 18px;
margin: 5px;
width: 18px;
position: absolute;
top: 0;
right: 0;
}
</style>
Changing the answer completely.
Try this structure:
<a href="smoodees" class="btn large green">
<p id="text">Check out our Smoodees</p>
<span></span>
</a>
and change the CSS like so:
#id{
float: left
}
span{
float: left
}
edit: For multiple buttons, change the ID to a Class