تکه کد جعبه html و css

سلام، شاید بخواهید یه جعبه تو یکی از پست های وبلاگتون بذارید که جلب توجه کنه.

کد:

<style>
.gbox {
Background: #00bb00;
Color: #fff;
Border-top: 5px solid #00aa00;
Border-left: 5px solid #00aa00;
Border-bottom: 5px solid #00cc00;
Border-right: 5px solid #00cc00;
Text-align: center;
Margin: 20px;
Padding: 2px;
Font-size: 16px;
Transition: all 0.5s;
}
.gbox:hover {
Filter: grayscale(100%);
Transform: scale(1.1)}
</style>
<div class="gbox">
<p>توجه: حالت خوبه؟</p>
</div>

نمونه:

توجه: حالت خوبه؟

کد:

<style>
.rbox {
Background: #bb0000;
Color: #fff;
Border-top: 5px solid #aa0000;
Border-left: 5px solid #aa0000;
Border-bottom: 5px solid #cc0000;
Border-right: 5px solid #cc0000;
Text-align: center;
Margin: 20px;
Padding: 2px;
Font-size: 16px;
Transition: all 0.5s;
}
.rbox:hover {
Filter: grayscale(100%);
Transform: scale(1.1)}
</style>
<div class="rbox">
<p>توجه: حالت خوبه؟</p>
</div>

نمونه:

توجه: حالت خوبه؟

کد:

<style>
.bbox {
Background: #0000bb;
Color: #fff;
Border-top: 5px solid #0000aa;
Border-left: 5px solid #0000aa;
Border-bottom: 5px solid #0000cc;
Border-right: 5px solid #0000cc;
Text-align: center;
Margin: 20px;
Padding: 2px;
Font-size: 16px;
Transition: all 0.5s;
}
.bbox:hover {
Filter: grayscale(100%);
Transform: scale(1.1)}
</style>
<div class="bbox">
<p>توجه: حالت خوبه؟</p>
</div>

نمونه:

توجه: حالت خوبه؟