Css card with button

Css card with button

Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.

Basic Card

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Image Card

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Here is the standard card with an image thumbnail.

FABs in Cards

Card Title add

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Here is an image card with a Floating Action Button.

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Here is an image card with a large Floating Action Button.

  
 
 
 
 Card Title add 
 
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
 
 
 
 
 

Horizontal Card

I am a very simple card. I am good at containing small bits of information.

Here is the standard card with a horizontal image.

  
Horizontal Card
 
 
 
 
 
I am a very simple card. I am good at containing small bits of information.
 
 
This is a link 
 
 
 
 

Card Reveal

Here is some more information about this product that is only revealed once clicked on.

Here you can add a card that reveals more information once clicked. Just add the card-reveal div with a span.card-title inside to make this work. Add the class activator to an element inside the card to allow it to open the card reveal.

  
 
 
 
Card Titlemore_vert 
This is a link
 
 
Card Titleclose 
Here is some more information about this product that is only revealed once clicked on.
 
 
 

Card Action Options

Here is some more information about this product that is only revealed once clicked on.

The default state is having the card-reveal go over the card-action.

Here is some more information about this product that is only revealed once clicked on.

You can make your card-action always visible by adding the class sticky-action to the overall card.

Tabs in Cards

You can add tabs to your cards by adding a dividing cards-tabs div inbetween your header content and your tab content.

White

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Basic white background card with tabs.

Colored

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Colored or dark background card with tabs.

Card Sizes

If you want to have uniformly sized cards, you can use our premade size classes. Just add the size class in addition to the card class.

Small

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

The Small Card limits the height of the card to 300px.

Medium

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

The Medium Card limits the height of the card to 400px.

Large

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

The Large Card limits the height of the card to 500px.

Card Panel

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.

For a simpler card with less markup, try using a card panel which just has padding and a shadow effect

  
 
 
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks. 
 
 
 

Help Materialize Grow

We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

Join the Discussion

We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.

Источник

Tailored Jeans

Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

How To Create a Product Card

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

.card <
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
>

.price color: grey;
font-size: 22px;
>

.card button border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
>

.card button:hover opacity: 0.7;
>

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Card CSS examples

In this post, I will show you a couple of cards that I made with HTML & CSS. You can use any of the card CSS or designs that you like. Let’s explore them one by one.

Example 1: simple card design with HTML CSS

In this example, I have an image on top, a card title, a description & a link/button. This card also has some other hover styles that you’ll find on the live demo.

HTML

 
Card title goes here
 
Your card description goes here. Consectetur adipisicing elitllum nulla odit nihil sit sequi quia eligendi corporis.
 Card button 
 

.card-holder < max-width: 1100px; margin: 0 auto; >.card-holder .card < max-width: 350px; border: 1px solid #4285F4; border-radius: 3px; -webkit-transition: -webkit-box-shadow 0.7s ease-in; transition: -webkit-box-shadow 0.7s ease-in; transition: box-shadow 0.7s ease-in; transition: box-shadow 0.7s ease-in, -webkit-box-shadow 0.7s ease-in; margin: 30px 15px; >.card-holder .card h5 < padding: 20px 15px; >.card-holder .card p < padding: 0 15px; margin: 0 0 20px; >.card-holder .card a < padding: 10px 30px; display: inline-block; background-color: #E43E31; margin: 0 15px 20px; border: 1px solid #d92a1c; border-radius: 25px; color: #FFFFFF; text-transform: uppercase; text-shadow: 2px 1px #222222; -webkit-transition: background-color 0.7s ease; transition: background-color 0.7s ease; font-weight: 700; font-size: 14px; >.card-holder .card a:hover < background-color: #c2190c; >.card-holder .card:hover

Card title goes here
Your card description goes here. Consectetur adipisicing elitllum nulla odit nihil sit sequi quia eligendi corporis.

  
Lorem ipsum dolor sit elit
  
Amet consectetur adipisicing
  
Obcaecati modi ex culpa
  
Provident nostrum possimus

ul < padding: 0; >ul li < list-style: none; font-size: 14px; border-bottom: 1px solid #c0c1c2; padding: 15px 15px; >ul li:first-child < border-top: 1px solid #c0c1c2; >.card-holder < max-width: 1100px; margin: 0 auto; >.card-holder .card < max-width: 350px; border: 1px solid #4285F4; border-radius: 3px; -webkit-transition: -webkit-box-shadow 0.7s ease-in; transition: -webkit-box-shadow 0.7s ease-in; transition: box-shadow 0.7s ease-in; transition: box-shadow 0.7s ease-in, -webkit-box-shadow 0.7s ease-in; margin: 30px 15px; >.card-holder .card h5 < padding: 20px 15px; >.card-holder .card p < padding: 0 15px; margin: 0 0 20px; >.card-holder .card a < padding: 10px 30px; display: inline-block; background-color: #E43E31; margin: 0 15px 20px; border: 1px solid #d92a1c; border-radius: 25px; color: #FFFFFF; text-transform: uppercase; text-shadow: 2px 1px #222222; -webkit-transition: background-color 0.7s ease; transition: background-color 0.7s ease; font-weight: 700; font-size: 14px; >.card-holder .card a:hover < background-color: #c2190c; >.card-holder .card:hover

.example-3 < background-color: #fff4e6; >.example-3 h2 < text-align: center; text-transform: uppercase; color: #FD334D; font-size: 32px; >@media (min-width: 768px) < .example-3 h2 < font-size: 45px; >> @media (min-width: 768px) < .example-3 .card-holder < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; >> .example-3 .card-holder .item < margin: 0 0 30px; border: 1px solid #fcb65d; border-radius: 3px; -webkit-transition: -webkit-box-shadow 0.5s ease-in; transition: -webkit-box-shadow 0.5s ease-in; transition: box-shadow 0.5s ease-in; transition: box-shadow 0.5s ease-in, -webkit-box-shadow 0.5s ease-in; >@media (min-width: 768px) < .example-3 .card-holder .item < -ms-flex-preferred-size: 31%; flex-basis: 31%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; >> .example-3 .card-holder .item .item--header < text-align: center; background-color: #0C1733; padding: 30px 15px; >.example-3 .card-holder .item .item--header h3 < margin: 0; text-transform: uppercase; color: #92E81C; font-size: 36px; >.example-3 .card-holder .item .item--header p < margin: 0; >.example-3 .card-holder .item .item--header p .price < color: white; font-size: 22px; >.example-3 .card-holder .item ul < margin: 0; >@media (min-width: 768px) < .example-3 .card-holder .item ul < -webkit-box-flex: 1; -ms-flex: 1; flex: 1; >> .example-3 .card-holder .item ul li < font-weight: 100; >.example-3 .card-holder .item .link < padding: 30px 15px; >.example-3 .card-holder .item .link a < display: inline-block; background-color: #92E91F; padding: 10px 30px; color: #0C1733; font-size: 16px; font-weight: 700; border-radius: 7px; text-transform: capitalize; >.example-3 .card-holder .item:hover