এইচটিএমএল
এইচটিএমএল লেবেলটি সহ পোস্টগুলি দেখানো হচ্ছে৷ সকল পোস্ট দেখান
এইচটিএমএল লেবেলটি সহ পোস্টগুলি দেখানো হচ্ছে৷ সকল পোস্ট দেখান

সানরাইট এইচটিএমএল টেমপ্লেট - SunRight Dynamic HTML Templete

৪:৫৪ PM 0 Comment
সানরাইট এইচটিএমএল টেমপ্লেট - SunRight Dynamic HTML Templete
আসসালামু আলাইকুম,
আজকে আবার আরেকটি ডায়নামিক এইচটিএমএল ওয়েবসাইট টেমপ্লেট নিয়ে এলাম আপনাদের জন্য সম্পূর্ণ বিনামুল্যে।
এর নাম সানরাইট। নামের কোনো মানেই নেই, পেছনের ব্যাকগ্রাউন্ড ইমেজের সাথে মিল রেখে নাম একটা দিয়ে দিয়েছি।
এইটিও সম্পূর্ণ ওপেন সোর্স টেমপ্লেট।
যেকোনো সফটওয়ার ওয়েবসাইটের জন্য আদর্শ টেমপ্লেট এইটি।



ফিচার,
  • 95% Responsive
  • SEO Friendly
  • Clean Design
  • X Browser Support
  • Font Awesome Enabled
  • Bootstrap Enabled
  • Responsive menu bar
  • Social and Git Buttons
  • ajax Download Counter



.

বিভাগঃ
আরও পড়ুন

১৩টা অসাধারণ সিএসএস বাটন!

১২:০০ PM 0 Comment
১৩টা অসাধারণ সিএসএস বাটন!
আসসালামু আলাইকুম,
আমি ইন্টারনেট ঘেটে প্রায় ১৩টি সিএসএস বাটন যোগার করেছি। এগুলো সিএসএস দিয়ে বলে ক্রস ব্রাউজার সাপরটেড। আপনাদের ভালো লাগবে আশা করি।


নিচে কোড এবং ডেমো:

Preview:

Code

<a href="#" class="button-0">Buy</a>

<style type="text/css">
.button-0 {
    position: relative;
    padding: 10px 40px;
    margin: 0px 10px 10px 0px;
    float: left;
    border-radius: 10px;
    font-family: 'Helvetica', cursive;
    font-size: 25px;
    color: #FFF;
    text-decoration: none;  
    background-color: #3498DB;
    border-bottom: 5px solid #2980B9;
    text-shadow: 0px -2px #2980B9;
    /* Animation */
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
}

.button-0:hover, 
.button-0:focus {
    text-decoration: none;
    color: #fff;
}

.button-0:active {
    transform: translate(0px,5px);
    -webkit-transform: translate(0px,5px);
    border-bottom: 1px solid;
}
</style>

Preview:

Code:

<input type="submit" class="styled-button-1" value="Download" /> 

<style type="text/css">
.styled-button-1 {
 -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 color:#333;
 background-color:#FA2;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border:none;
 font-family:'Helvetica Neue',Arial,sans-serif;
 font-size:16px;
 font-weight:700;
 height:36px;
 padding:4px 16px;
 text-shadow:#FE6 0 1px 0
}
 </style>

Preview:

Code:

<input type="submit" class="styled-button-2" value="Download" /> 

<style type="text/css"> 
.styled-button-2 {
 -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 border-bottom-color:#333;
 border:1px solid #61c4ea;
 background-color:#7cceee;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 color:#333;
 font-family:'Verdana',Arial,sans-serif;
 font-size:14px;
 text-shadow:#b2e2f5 0 1px 0;
 padding:5px
}
</style>

Preview:

Code:

<input type="submit" class="styled-button-3" value="Download" /> 

<style type="text/css"> 
.styled-button-3 {
 -webkit-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 background-color:#5B74A8;
 border:1px solid #29447E;
 font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
 font-size:12px;
 font-weight:700;
 padding:2px 6px;
 color:#fff;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px
}
 </style>

Preview:

Code:

<input type="submit" class="styled-button-4" value="Download" /> 

<style type="text/css"> 
.styled-button-4 {
 -webkit-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
 background-color:#EEE;
 border-radius:0;
 -webkit-border-radius:0;
 -moz-border-radius:0;
 border:1px solid #999;
 color:#666;
 font-family:'Lucida Grande',Tahoma,Verdana,Arial,Sans-serif;
 font-size:11px;
 font-weight:700;
 padding:2px 6px;
}
</style>

Preview:

Code:

<input type="submit" class="styled-button-5" value="Download" /> 

<style type="text/css"> 
.styled-button-5 {
 background-color:#ed8223;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:18px;
 line-height:30px;
 border-radius:20px;
 -webkit-border-radius:20px;
 -moz-border-radius:20px;
 border:0;
 text-shadow:#C17C3A 0 -1px 0;
 width:120px;
 height:32px
}                
</style>

Preview:

Code:

<input type="submit" class="styled-button-6" value="Download" /> 

<style type="text/css">
.styled-button-6 {
 background:#f78096;
 background: -moz-linear-gradient(top,#f78096 0%,#f56778 100%);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f78096),color-stop(100%,#f56778));
 background: -webkit-linear-gradient(top,#f78096 0%,#f56778 100%);
 background: -o-linear-gradient(top,#f78096 0%,#f56778 100%);
 background: -ms-linear-gradient(top,#f78096 0%,#f56778 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f78096',endColorstr='#f78096',GradientType=0);
 padding:5px 4px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:12px;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border:1px solid #ae4553
}                
</style>

Preview:

Code:

<input type="submit" class="styled-button-7" value="Download" /> 

<style type="text/css">
.styled-button-7 {
 background: #FF5DB1;
 background: -moz-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FF5DB1),color-stop(100%,#E94A86));
 background: -webkit-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background: -o-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background: -ms-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background: linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#FF5DB1', endColorstr='#E94A86',GradientType=0);
 padding:5px 7px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:12px;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border:1px solid #E8124F
}
                
</style>

Preview:

Code:

<input type="submit" class="styled-button-8" value="Download" /> 

<style type="text/css">
.styled-button-8 {
 background: #25A6E1;
 background: -moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
 background: -webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background: -o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background: -ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background: linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
 padding:8px 13px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:17px;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border:1px solid #1A87B9
}                
</style>

Preview:

Code:

<input type="submit" class="styled-button-9" value="Download" /> 

<style type="text/css"> 

   .styled-button-9 {
 background: #00A0D1;
 background: -moz-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#00A0D1),color-stop(100%,#008DB8));
 background: -webkit-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background: -o-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background: -ms-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background: linear-gradient(top,#00A0D1 0%,#008DB8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00A0D1',endColorstr='#008DB8',GradientType=0);
 padding:8px 20px;
 color:#cfebf3;
 font-family:'Helvetica Neue',sans-serif;
 font-size:13px;
 border-radius:40px;
 -moz-border-radius:40px;
 -webkit-border-radius:40px;
 border:1px solid #095B7E
}
             
</style>

Preview:

Code:

<input type="submit" class="styled-button-10" value="Download" /> 

<style type="text/css"> 
.styled-button-10 {
 background:#5CCD00;
 background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
 background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#5CCD00', endColorstr='#4AA400',GradientType=0);
 padding:10px 15px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:16px;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border:1px solid #459A00
}
</style>

Preview:

Code:

<input type="submit" class="styled-button-11" value="Download" /> 

<style type="text/css">
.styled-button-11 {
 background: #FEDA71;
 background: -moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49));
 background: -webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background: -o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background: -ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background: linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#FEDA71',endColorstr='#FEBB49',GradientType=0);
 padding:8px 18px;
 color:#623F1D;
 font-family:'Helvetica Neue',sans-serif;
 font-size:16px;
 border-radius:48px;
 -moz-border-radius:48px;
 -webkit-border-radius:48px;
 border:1px solid #623F1D
}         
</style>

Preview:

Code:

<input type="submit" class="styled-button-12" value="Download" /> 

<style type="text/css"> 
.styled-button-12 {
 background: #5B74A8;
 background: -moz-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5B74A8), color-stop(100%,#5B74A8));
 background: -webkit-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 background: -o-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 background: -ms-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 background: linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#5B74A8',endColorstr='#5B74A8',GradientType=0);
 padding:2px 6px;
 color:#fff;
 font-family:'Helvetica',sans-serif;
 font-size:11px;
 border-radius:0;
 -moz-border-radius:0;
 -webkit-border-radius:0;
 border:1px solid #1A356E
}
</style>

বিভাগঃ
আরও পড়ুন
এতে সদস্যতা: পোস্টগুলি (Atom)

মোট পাতাদর্শিত