CSS tlačítko s páskem Karty
CSS pásek
Kód:
<style>
.btn {
border-style: solid;
border-width: 1px;
border-color: #282A35;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #282A35;
color: white;
position: relative;
}
.ribbon {
width: 60px;
font-size: 14px;
padding: 4px;
position: absolute;
right: -25px;
top: -12px;
text-align: center;
border-radius: 25px;
transform: rotate(20deg);
background-color: #ff0000;
color: white;
}
.btn:hover {
background-color: white;
color: #282A35;
border-style: solid;
border-width: 1px;
border-color: #282A35;
}
</style>
<button class="btn">Tlačítko pro něco nového <span class="ribbon">Nové</span></button>
Responzivní sloupcové karty
Změňte velikost okna prohlížeče, abyste viděli efekt.
Karta 1
Nějaký text
Nějaký text
Karta 2
Nějaký text
Nějaký text
Karta 3
Nějaký text
Nějaký text
Kód:
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 0 10px;
}
.row {margin: 0 -5px;}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
}
</style>
<div class="row">
<div class="column">
<div class="card">
<h3>Karta 1</h3>
<p>Nějaký text</p>
<p>Nějaký text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Karta 2</h3>
<p>Nějaký text</p>
<p>Nějaký text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Karta 3</h3>
<p>Nějaký text</p>
<p>Nějaký text</p>
</div>
</div>
</div>