Issue
I have a donate button that is in a navbar that I need to add a throbbing heart next to the word Donate. I created the heart using CSS but every time I try to put it next to the word Donate, the heart is either way off from the button, not in the correct shape or the button splits. How can I get the throbbing heart inside the button next to the left of "Donate"?
.donate-btn>a {
text-align: center;
color: #fff;
text-decoration: none;
background-color: #ca0e17;
padding: 5px 10px 5px 35px;
border-radius: 5px;
margin-left: 20px;
}
.box-heartbeat {
width: 15px;
height: 15px;
background: #fff;
transform: rotate(-45deg);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
animation: heartbeat 0.8s linear infinite;
position: absolute;
top: 15px;
left: 30px;
}
.box-heartbeat:before {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #fff;
top: -50%;
border-radius: 15px;
}
.box-heartbeat:after {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #fff;
right: -50%;
border-radius: 15px;
}
@keyframes heartbeat {
0% {
transform: rotate(-45deg) scale(1.05);
}
100% {
transform: rotate(-45deg) scale(1.0);
}
100% {
transform: rotate(-45deg) scale(0.9);
}
}
<ul>
<li>
<div class="donate-btn">
<a href="{!! route('marketing.donate') !!}">{{ trans('layouts/master/navigation.donate') }}</a>
</div>
</li>
</ul>
Okay, so I figured a solution. If you know of something better, I would still love to know! I ended up adding more padding to the left of the button to widen it, added position absolute to the box-heartbeat and positioned using top and left. I actually had another button that I used for mobile and that had to be wrapped with a container with position relative to get the heart to stay in position for different screen sizes:
.donate-btn>a { text-align: center; color: #fff; text-decoration: none; background-color: #ca0e17; padding: 5px 10px 5px 35px; border-radius: 5px; margin-left: 20px; }
.box-heartbeat {
width: 15px;
height: 15px;
background: #fff;
transform: rotate(-45deg);
box-shadow: 0 2px 20px rgba(0,0,0,0.5);
animation: heartbeat 0.9s linear infinite;
position: absolute;
top: 15px;
left: 30px;
}
Solution
.donate-btn {
position: relative;
display: inline-block;
margin-left: 20px;
}
.donate-btn > a {
text-align: center;
color: #fff;
text-decoration: none;
background-color: #ca0e17;
padding: 5px 10px 5px 45px;
border-radius: 5px;
}
.box-heartbeat {
width: 15px;
height: 15px;
background: #fff;
transform: rotate(-45deg);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
animation: heartbeat 0.9s linear infinite;
position: absolute;
top: 20%;
left: 15px;
transform: translate(-50%, -50%);
}
.box-heartbeat:before,
.box-heartbeat:after {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #fff;
border-radius: 15px;
}
.box-heartbeat:before {
top: -50%;
}
.box-heartbeat:after {
right: -50%;
}
@keyframes heartbeat {
0% {
transform: rotate(-45deg) scale(1.05);
}
50% {
transform: rotate(-45deg) scale(1.0);
}
100% {
transform: rotate(-45deg) scale(0.9);
}
}
<ul>
<li>
<div class="donate-btn">
<div class="box-heartbeat"></div>
<a href="{!! route('marketing.donate') !!}">{{ trans('layouts/master/navigation.donate') }}</a>
</div>
</li>
</ul>
Answered By - 봊 Јìԥ
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.