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;
}
Related
My problem is my div that is called .border, the only purpose of it is to make cool border effect around the 2 headlines in the middle-left of the landingp age picture. But you can see pretty good in the screenshot, that the .border is kind of attached to the picture and stretches out. I have really no clue how to make this border perfectly centered behind the text.
.home {
margin: 3rem 6rem 3rem 6rem;
background-image: url(img/Aliens\ Cows.jpg);
background-repeat: no-repeat;
background-size: inherit;
min-height: 20rem;
box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.2), 1rem 1rem 0rem var(--clr-main);
}
.layer-over-p {
min-height: 20rem;
z-index: 1;
background: linear-gradient(90deg, rgba(32, 31, 27, 0.5), rgb(255, 234, 0, 0.6));
backdrop-filter: blur(6px);
}
.text-1 {
text-shadow: 0.5rem 0.5rem 0.4rem rgba(0, 0, 0, 0.2);
margin-top: 4.5rem;
margin-left: 8rem;
}
.text-1 a {
font-size: 6rem;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-family: var(--ff-primary);
}
.text-2 {
text-shadow: 0.3rem 0.3rem 0.4rem rgba(0, 0, 0, 0.2);
margin-top: -1.6rem;
margin-left: 8.32rem;
}
.text-2 a {
font-size: 1.6rem;
text-decoration: none;
color: rgb(189, 189, 189);
text-transform: uppercase;
font-family: var(--ff-primary);
}
.border {
position: absolute;
z-index: 2;
}
/* ANIMATIONS = Navbar + Home *******************************************/
.border {
border-top: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid transparent;
transition: border-top 0.5s ease-in-out, border-right 0.5s ease-in-out, border-bottom 0.5s ease-in-out, border-left 0.5s ease-in-out;
}
.border:hover {
border-top: 3px solid var(--clr-accent);
border-right: 3px solid var(--clr-accent);
border-bottom: 3px solid var(--clr-accent);
border-left: 3px solid var(--clr-accent);
}
<section class="home">
<div class="border">
<div class="text-1">My Work</div>
<div class="text-2">See my Creations.</div>
</div>
<div class="layer-over-p"></div>
</section>
I moved your background CSS from layer-over-p into border and wrapped both your text elements in a div with some arbitrary amount of padding. I also added #Antoine Richard's answer of simplifying the border CSS to get this result:
.home {
margin: 3rem 6rem 3rem 6rem;
background-image: url(img/Aliens\ Cows.jpg);
background-repeat: no-repeat;
background-size: inherit;
min-height: 20rem;
box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.2), 1rem 1rem 0rem var(--clr-main);
}
.layer-over-p {
min-height: 20rem;
z-index: 1;
}
.text-1 {
text-shadow: 0.5rem 0.5rem 0.4rem rgba(0, 0, 0, 0.2);
}
.text-1 a {
font-size: 6rem;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-family: var(--ff-primary);
}
.text-2 {
text-shadow: 0.3rem 0.3rem 0.4rem rgba(0, 0, 0, 0.2);
margin-top: -1.6rem;
margin-left: 8.32rem;
}
.text-2 a {
font-size: 1.6rem;
text-decoration: none;
color: rgb(189, 189, 189);
text-transform: uppercase;
font-family: var(--ff-primary);
}
.border {
position: absolute;
background: linear-gradient(90deg, rgba(32, 31, 27, 0.5), rgb(255, 234, 0, 0.6));
backdrop-filter: blur(6px);
z-index: 2;
overflow: wrap;
}
/* ANIMATIONS = Navbar + Home *******************************************/
.border {
border: 3px solid transparent;
transition: border-color 0.5s ease-in-out;
}
.border:hover {
border-color: var(--clr-accent);
}
<section class="home">
<div class="border">
<div style = "padding: 65px">
<div class="text-1">My Work</div>
<div class="text-2">See my Creations.</div>
</div>
</div>
</section>
This appears to keep your text items centered both within your gradient background and border, if that is what you are looking for.
For those who have maybe the same problem, just fixed it by deleting the margin of the text and adding the margin to the border. The Border how I added it in my post was including the margin of the text. That's why the border had such a big size.
As border needs some space, you need to define it even if it's not visible.
To do that, define invisible border :
border: 3px solid transparent;
Then when you need to show it :
border-color: var(--clr-accent);
And for for transition :
transition: border-color 0.5s ease-in-out;
Also, you don't need to define it for each side as they all have the same value
My toggle button is working if it run in separate webpage where only toggle button included.
But its not working when i put up the same code in form page where many css are included.
/* Checkbox body */
#tog {
display: block;
width: 50px;
height: 28px;
margin: 0px auto;
border-radius: 100px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
background-color: #E6E9EC;
}
#toggly {
display: none;
}
/* The toggle */
.i {
height: 24px;
width: 24px;
background: #ffffff;
display: inline-block;
border-radius: 100px;
margin-top: 2px;
margin-left: 2px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
pointer-events: none;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
#tog:hover> .i {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
transform: scale(1.01);
}
#toggly:checked+ #tog > .i {
margin-left: 24px;
}
#tog :active {
background-color: #A6B9CB;
}
#tog :active> .i {
width: 34px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}
#toggly:checked+ #tog :active> .i {
margin-left: 18px;
}
#toggly:checked+ #tog {
background-color: #008FFF;
}
<html>
<head>
<title></title>
</head>
<body>
<!-- The Toggle -->
<input type="checkbox" id="toggly" >
<label for="toggly" id="tog"><div class="i"></div></label>
</body>
</html>
The above code is working but if put in form page where many css included its not working.
Can anyone help me out?
Every thing looks fine except for this code below:
.i {
height: 24px;
width: 24px;
background: #ffffff;
display: inline-block;
border-radius: 100px;
margin-top: 2px;
margin-left: 2px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
pointer-events: none;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
cause it might have been overridden so give it a parent id to make it more specific as below:
#tog .i {
height: 24px;
width: 24px;
background: #ffffff;
display: inline-block;
border-radius: 100px;
margin-top: 2px;
margin-left: 2px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
pointer-events: none;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
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
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>
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;
}
}
}
}
}
}