ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-23 00:25:11 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Button styling

Browse source
This commit is contained in:
Thomas Smith 2022-09-14 21:29:56 -04:00
parent 5754a44c0b
commit 7bc8ab0fc5
3 changed files with 38 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/layouts/partials/detail-btn-large.html
View file

@ -2,21 +2,37 @@
.detail-btn-large{
display:inline-block;
font-family: "pp-neue-machina", sans-serif;
font-size: 20px;
background-color: #1a1a1a;
border: .5px solid #ffffff;
color: #fff;
padding-top: 5px;
text-decoration: none;
text-transform: uppercase;
width: 35%;
width: 50%;
height: 75px;
transition: 0.1s ease-in-out;
transition: 0.2s ease-in-out;
}
.detail-btn-large:hover{
background-color: #8000ff;
box-shadow: inset 0px 0px 0px 8px #1a1a1a !important;
box-shadow: inset 0px 0px 0px 6px #1a1a1a !important;
}
/* Icon Styling */
.detail-btn-large .icon-enter-arrow{
display: inline-block;
position: relaitve;
margin-right: 10px;
transition: 0.2s ease-in-out;
}
.detail-btn-large:hover .icon-enter-arrow{
display: inline-block;
transform: rotate(-45deg) !important;
}
</style>
<button href="#" class="detail-btn-large">details</button>
<button href="#" class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>

17
src/layouts/partials/detail-btn.html
View file

@ -17,6 +17,21 @@
background-color: #8000ff;
box-shadow: inset 0px 0px 0px 4px #1a1a1a !important;
}
/* Icon Styling */
.detail-btn .icon-enter-arrow{
display: inline-block;
position: relaitve;
margin-right: 10px;
transition: 0.2s ease-in-out;
}
.detail-btn:hover .icon-enter-arrow{
display: inline-block;
transform: rotate(-45deg) !important;
}
</style>
<button href="#" class="detail-btn">details</button>
<button href="#" class="detail-btn"><i class="icon-enter-arrow"></i>details</button>

3
src/static/css/style.css
View file

@ -350,6 +350,7 @@ hr{
}
.social-icon{
display: inline-block;
margin-right: 20px !important;
position: relative;
top:3px;
}