Using
github link
HTML Code
<div class="col-md-12">
<div class="col-md-2">
Processing
</div>
<div class="col-md-4">
<button class="btn btn-primary">Hello</button>
</div>
</div>
.btn {
position: relative;
padding: 8px 30px;
border: 0;
margin: 10px 1px; cursor: pointer;
border-radius: 2px;
text-transform: uppercase;
text-decoration: none;
color: rgba(255, 255, 255, 0.84);
transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); outline: none !important; }
You can clearly notice that button is going down as compared to label.
Any CSS Fix? temporary may be??
A middle vertical-align and a display of inline-block should fix this.
Booply
<div class="col-md-12">
<div class="col-md-2 vcenter">
Processing
</div>
<div class="col-md-4 vcenter">
<button class="btn btn-primary">Hello</button>
</div>
</div>
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
Related
so i cant use background-color to change color but if im using background property it works and change the color, why cant just use background-color property?
here's the html file
<div class="flex-row">
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button operator">-</div>
</div>
<div class="flex-row">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button operator">+</div>
</div>
<div class="flex-row">
<div class="button clear">CE</div>
<div class="button">0</div>
<div class="button equals double">=</div>
</div>
here's the css file
.button{
flex-basis:25%;
font-size: 1.5em;
text-align: center;
padding: 40px;
border: 1px solid black;
background: -webkit-linear-gradient(top, #d2d2d2, #ddd);
cursor: pointer;
}
.operator, .equals, .negative{
background-color: orange;
}
Here's the funny thing: It's working, just not as you'd expect.
The background property always stands in-front of the background-color property. When you say the background color of the element is orange, it works perfectly. But the background property is different, and it covers the background-color of the element. I tried searching for the official term for this, but couldn't find it, so that was my rudimentary explanation. To make this more clear, try setting one of the parameters of the linear gradient to transparent, you'll see that portion of the background reveal the orange background-color. Here's the code that'll make it clearer to you:
.button{
flex-basis:25%;
font-size: 1.5em;
text-align: center;
padding: 40px;
border: 1px solid black;
background: -webkit-linear-gradient(top, transparent, #ddd);
cursor: pointer;
}
.operator, .equals, .negative{
background-color: orange;
}
So no, there's no scalable, simple solution for this, all you can do is change the background of the other elements to orange.
You have to overwrite the gradient.
.button{
flex-basis:25%;
font-size: 1.5em;
text-align: center;
padding: 40px;
border: 1px solid black;
background: -webkit-linear-gradient(top, #d2d2d2, #ddd);
cursor: pointer;
}
.operator, .equals, .negative{
background: -webkit-linear-gradient(top, orange, orange);
}
<div class="flex-row">
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button operator">-</div>
</div>
<div class="flex-row">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button operator">+</div>
</div>
<div class="flex-row">
<div class="button clear">CE</div>
<div class="button">0</div>
<div class="button equals double">=</div>
</div>
I am trying to add transition effect on some bootstrap buttons.
The problem is with height and width properties. These change straight away without considering the the transition duration property.
Note that all other properties change within described duration (2s in this case).
HTML
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
<button type="button" data-toggle="modal" data-target="#infoModal" class="btn btn-outline-warning mt-5 mb-3 3mr-3 ">Learn More</button>
</div>
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.btn-outline-warning {
border-color: white;
transition: all;
transition-duration: 2s;
}
.btn-outline-warning:hover {
border-color: rgb(255, 136, 0);
background-color: rgba(0,0,0,.5);
transform: rotate(20deg);
width: 300px;
height: 100px;
}
Here is my JSFiddle for more clarification and demonstration.
https://jsfiddle.net/p34mjfr5/11/
If you want to use transition on one of your css property you need to set default value on it first, then change it on hover. specially those propery that need size like px or etc.. width or height following this rule.
.btn-outline-warning {
border-color: white;
transition: 2s all ease;
width: 200px; /* default value */
height: 50px; /* default value */
}
.btn-outline-warning:hover {
border-color: rgb(255, 136, 0);
background-color: rgba(0, 0, 0, .5);
transform: rotate(20deg);
width: 300px;
height: 100px;
}
JSFiddle
I am trying to put a image inside a header in a boostrap card, I do know there are other questions like this but I seriously tried everything.
Here is the code:
<div class="container">
<div style="padding: 20px 0px;" *ngFor="let blog of blogs">
<div class="card">
<div class="card-header" (click)="navigate('Blog')">
<a (click)="navigate(blog.title)">{{ blog.title }}</a>
</div>
<div class="card-body">
<p class="card-text">
{{ blog.summary }}
</p>
</div>
</div>
</div>
</div>
css:
.card-header {
background: rgba(0, 255, 0, 0.61);
color: rgb(0, 0, 0);
font-weight: bold;
cursor: pointer;
}
.card-body {
background: #43484d;
}
.card-text {
color: #6cffce;
font-weight: bold;
}
I have tried
background-image: url(imagepath)
it does not work
I also tried
<image src ...>
as top-overlay but that neither
I just want to put an image in the header which will be transparent with on the top a color (kind of like looking into a glass type of thing)
not exactly sure what you want. check this snippet if it gives you any ideas.
.card-header {
background: linear-gradient(rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.25)), url(http://www.tedgoas.com/assets/images/work/stack-overflow/cover.jpg) no-repeat center center;
height: 200px;
position: relative;
}
.card-header a {
color: white;
font-weight: bold;
font-size: 50px;
position: absolute;
top: 40%;
left: 40%;
}
.card-body {
background: #43484d;
}
.card-text {
color: #6cffce;
font-weight: bold;
}
<div class="container">
<div>
<div class="card">
<div class="card-header">
<a>Header</a>
</div>
<div class="card-body">
<p class="card-text">
Body
</p>
</div>
</div>
</div>
</div>
Here is your code as per your requirement see the code card-header same thing you can apply in anywhere it will work fine. here is link codepen link here
<div class="container">
<div style="padding: 20px 0px;" *ngFor="let blog of blogs">
<div class="card">
<div class="card-header" (click)="navigate('Blog')">
<a (click)="navigate(blog.title)">link</a>
</div>
<div class="card-body">
<p class="card-text">
Para1
</p>
</div>
</div>
</div>
</div>
Css goes here...
html, body {
height: 100%;
width: 100%;
margin: 0;
color: #f9f0f3;
background: #D21237;
}
.card-header {
background: rgba(0, 255, 0, 0.61);
color: rgb(0, 0, 0);
font-weight: bold;
cursor: pointer;
position:relative;
height:10vh;
}
.card-header::before{
content:"";
background-image: url("http://www.hdnicewallpapers.com/Walls/Big/Abstract/Red_and_Blue_Smoke_Creative_Design_Wallpaper.jpg");
height:10vh;
position: absolute;
top:0px;
width:100%;
z-index:99999;
}
.card-body {
background: #43484d;
}
.card-text {
color: #6cffce;
font-weight: bold;
}
Come to a strange problem, when I use css to set the button, I can set its color, font-size, background, but cannot set its border. The following is HTML and CSS code.
.btn-general {
border-width: 2px !important;
border-style: solid !important;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;
}
.btn-white {
border-color: #fff;
color: #fff;
}
<section id="home">
<div id="home-cover">
<div id="home-content-box">
<div id="home-content-box-inner">
<div id="home-heading">
<h3>Watch Out<br>The Modern Responsive Website!</h3>
</div>
<div id="home-btn">
<a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
</div>
</div>
</div>
</div>
</section>
Put your css in Style Tag
<style>
.btn-general{
border-width:2px !important;
border-style: solid !important;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;
}
.btn-white{
border-color: #fff;
color: #fff;
}
</style>
always put CSS on the top of html
<div id="home-cover">
<div id="home-content-box">
<div id="home-content-box-inner">
<div id="home-heading">
<h3>Watch Out<br>The Modern Responsive Website!</h3>
</div>
<div id="home-btn">
<a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
</div>
</div>
</div>
</div>
</section>
You have set your border-color to white that's why you could not see that. I have changed it to darker color so that you can see it.
.btn-general{
border-width:2px !important;
border-style: solid !important;
border-color: #ff3333;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;
}
.btn-white{
color: #222;
border-color: #222;
}
<section id="home">
<div id="home-cover">
<div id="home-content-box">
<div id="home-content-box-inner">
<div id="home-heading">
<h3>Watch Out<br>The Modern Responsive Website!</h3>
</div>
<div id="home-btn">
<a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
</div>
</div>
</div>
</div>
</section>
Hope this helps
I have 3 services in a row, If you hover over each services title text, the underline gets longer under the corresponding title, What I want to do is make it so when you hover over the button or the title text, the line gets longer.
I would prefer a css solution if possible, I have tried the + (maybe wrongly) but it does not seem to be working for me
<div class="row ">
<div class="col-xl-3 col-lg-4 ">
<em>01</em>
<h2>Web Design</h2>
<p>Acro Design create research led websites that make you and your business money</p>
<button>Explore Web Design</button>
</div>
<div class="col-xl-3 col-lg-4 ">
<em>02</em>
<a href="">
<h2>Branding </h2>
</a>
<p>To make a business money though design you need to firstly understand how a user uses design.</p><button>Explore Branding</button></div>
<div class="col-xl-3 col-lg-4 "><em>03</em> <h2>Print Design</h2>
<p>Print design is about creating assets for your business, to increase your overall industry presence.</p><button class="but">Explore Print Design</button></div>
</div>
button {
margin: 1rem 0 7rem 0;
padding: 1.3rem;
font-size: 1.2rem;
font-style: italic;
background-color: transparent;
border: #000 solid 0.2rem;
color: #000
}
p {
padding: 1rem 1rem 0rem 0;
}
em {
display: block
}
h2 {
text-decoration: none;
display: inline-block;
border-bottom: 3px solid black;
white-space: nowrap;
width: 6.429rem;
transition: 0.5s ease;
height: 5.357rem;
color: #000;
}
h2:hover {
border-bottom: 3px solid black;
width: 200px;
text-decoration: none;
}
}
http://codepen.io/saltedm8/pen/oxVNjO
Thank you
REGARDS
Here is a pen with solution : http://codepen.io/anon/pen/EKMxor. This includes javascript ( JQuery ) but there is no way to do it without css only.. You could say this is 50% hardware accelerated.
HTML:
<div class="row ">
<div class="col-xl-3 col-lg-4 ">
<em>01</em>
<h2>Web Design</h2>
<p>Acro Design create research led websites that make you and your business money</p>
<button>Explore Web Design</button>
</div>
<div class="col-xl-3 col-lg-4 ">
<em>02</em>
<a href="">
<h2>Branding </h2>
</a>
<p>To make a business money though design you need to firstly understand how a user uses design.</p><button>Explore Branding</button></div>
<div class="col-xl-3 col-lg-4 "><em>03</em> <h2>Print Design</h2>
<p>Print design is about creating assets for your business, to increase your overall industry presence.</p><button class="but">Explore Print Design</button></div>
</div>
</div>
</section>
CSS:
p {
padding: 1rem 1rem 0rem 0;
}
button {
margin: 1rem 0 7rem 0;
padding: 1.3rem;
font-size: 1.2rem;
font-style: italic;
background-color: transparent;
border: #000 solid 0.2rem;
color: #000
}
em {
display: block
}
h2 {
text-decoration: none;
display: inline-block;
border-bottom: 3px solid black;
white-space: nowrap;
width: 6.429rem;
transition: 0.5s ease;
height: 5.357rem;
color: #000;
}
h2.active{
border-bottom: 3px solid black;
width: 200px;
text-decoration: none;
}
JS :
$("h2").mouseover(function() {
$(this).addClass("active");
});
$("h2").mouseout(function() {
$(this).removeClass("active");
});
$("button").mouseover(function(){
$(this).parent().children("a").children("h2").addClass("active");
});
$("button").mouseout(function(){
$(this).parent().children("a").children("h2").removeClass("active");
});