How can I dynamically place a "floating action button" between two seams? - html

Question

I´d like to know how I can place a "floating action button" as Google calls it (Reference: Floating Action Button, Google Material Design) dynamically between two "seams" - depending on the element it is placed in.
In my case I use simple HTML container classes with few CSS rules to create Google Cards.
The HTML and CSS Code I used here looks like the following:
/* Google Material Design (Paper-) Cards */
*.card {
position: relative;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
color: var(--grey800);
background-color: var(--grey50);
}
*.card .card-header {
position:relative;
padding: 20px 16px;
border-radius: 2px 2px 0px 0px;
-moz-border-radius: 2px 2px 0px 0px;
-webkit-border-radius: 2px 2px 0px 0px;
}
*.card .card-header > span.card-title {
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 300;
line-height: 1.5em;
}
*.card .card-header > span.card-subtitle {
display: block;
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 1.5em;
color: var(--grey700);
}
*.card .rich-media {
position: relative;
}
*.card .rich-media > img {
display: block;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
border: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
*.card .card-header ~ .rich-media > img {
border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
-webkit-border-radius: 0px 0px 2px 2px;
}
*.card .rich-media > span.card-title {
position: absolute;
left: 0;
bottom: 0;
padding: 20px 16px;
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 300;
color: var(--white);
}
*.card .card-content {
padding: 20px 16px;
}
*.card .card-content + .card-content {
border-top: 1px solid rgba(160, 160, 160, 0.2);
}
*.card .card-action {
position: relative;
padding: 20px 16px;
border-top: 1px solid rgba(160, 160, 160, 0.2);
border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
-webkit-border-radius: 0px 0px 2px 2px;
background-color: inherit;
}
*.card .card-action > a {
transition: color .3s ease;
font-family: 'Roboto', sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1.5em;
text-decoration: none;
text-transform: uppercase;
color: var(--orange500);
}
*.card .card-action > a:hover {
color: var(--orange200);
}
/* Google Material Design Buttons */
*.btn {
/* ... */
}
*.floating-action {
width: 56px;
height: 56px;
text-align: center;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
*.floating-action .material-icons {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="card" data-elevation="1">
<!-- card header -->
<div class="card-header">
<span class="card-title">Card Title</span>
<span class="card-subtitle">Card Subtitle</span>
</div>
<!-- card image -->
<div class="rich-media">
<image src="mountains.jpg"></image>
</div>
<!-- card content -->
<div class="card-content align-left">
<!-- floating action button -->
<div class="floating-action bg-orange500" data-elevation="2">
<i class="material-icons txt-white">mail_outline</i>
</div>
<p class="flowtext">
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
</p>
</div>
<!-- card actions -->
<div class="card-action">
This is a link
</div>
</div>
What I am trying to approach is a way of placing the seen button (the little one with the envelope icon on it) between (the previous) two contiguous borders like shown with a red dot below:
It is also possible to add multiple content containers; In this case the placed buttons should also be placed between the previous contiguous container borders.
In the last case shown above the button would be placed inside the 2nd card-container element.
Maybe some jQuery calculation would help. What do you think? What is a good practice to achieve the required layout?

Answer 1

In this Page: http://materializecss.com/cards.html you can access cards examples and one of them is placing the FAB button between title and content of the card. All you have to do is to see the CSS they show in source code.
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red">
<i class="material-icons">add</i>
</a>
</div>
<div class="card-content">
<p>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.</p>
</div>
</div>
</div>
</div>
.btn-floating.btn-large i {
line-height: 56px;
}
.btn-large i {
font-size: 1.6rem;
}
.btn-floating i {
width: inherit;
display: inline-block;
text-align: center;
color: #fff;
font-size: 1.6rem;
line-height: 40px;
}
.btn-floating.btn-large.halfway-fab {
bottom: -28px;
}
.btn-floating.halfway-fab {
position: absolute;
right: 24px;
bottom: -20px;
}
.btn-floating.btn-large {
width: 56px;
height: 56px;
padding: 0;
}