سوال در مورد ساخت دکمه های زیبا با css در حوملا

[3245 10]

سلام

من قصد دارم از لینک زیر، دکمه ی 3D-ish Button رو در جوملا در یک مطلب به کار ببرم، HTML رو میزارم توی مطلب جوملا میزارم، CSS رو هم در فایل templates/system/css/system.css میزارم، اما دکمه کار نمیکنه، اگر دوستان میتونن کمک کنن ممنون میشم،

40+ دکمه زیبای CSS از سایت Codepen

اگر دوستان دکمه های ساده تری با همین زیبایی داشتن که قرار دادنش در جوملا راحت بود ممنون میشم کمک کنند..

ارادت

[mmfallah 67]

برای قرار دادن html از طریق ویرایشگر از دکمه html موجود استفاده کنید

[3245 10]

عذر میخوام

css رو نمیخونه، css دقیقا کجا باید قرار بگیره، من کد زیر رو در مسیر templates/system/css/system.css گذاشتم، اما دکمه به خودش استایل نگرفته،

body {

background: #eee;

padding: 5em 0;

text-align: center;

}

.button {

$color: #eee;

@mixin font-color {

@if lightness($color) > 50 {

color: rgba(black,0.8);

text-shadow: 0 0.1em 0 rgba(white,0.5);

} @else {

color: rgba(white,0.85);

text-shadow: 0 -0.08em 0 darken($color, 20%);

}

}

font: bold 20px Arial,sans-serif;

@include font-color;

display: inline-block;

outline: none;

cursor: pointer;

padding: 0.4em 2em 0.5em;

@include border-radius(0.30em);

border: 1px solid;

border-color: darken($color, 20%) darken($color, 30%) darken($color, 40%);

background-color: $color;

@include background-image(linear-gradient($color, darken($color, 10%)));

@include box-shadow(0 0.1em 0.5em rgba(black,0.10), 0 0.1em 0.2em rgba(black,0.3), 0 -0.1em 0.07em rgba(black,0.3) inset, 0 0.1em 0.07em rgba(white,0.2) inset);

@include transition(all 100ms);

&;:hover {

@include box-shadow(0 0.1em 0.5em rgba(black,0.4), 0 0.1em 0.2em rgba(black,0.4), 0 -0.1em 0.07em rgba(black,0.3) inset, 0 0.1em 0.07em rgba(white,0.2) inset);

}

&;:active {

padding: 0.4em 2em 0.4em;

margin-top: 0.1em;

border-color: darken($color, 30%) darken($color, 20%) $color;

@include background-image(linear-gradient(darken($color, 5%), $color));

@include box-shadow(0 0.1em 0.2em rgba(black,0.1) inset, 0 0.1em 0.1em rgba(black,0.2) inset, 0.05em 0 0.07em rgba(black,0.2) inset, -0.05em 0 0.07em rgba(black,0.2) inset);

@include transition(all 10ms);

}

}

در واقع این لینک برای دکمه زیر است

به سایت http://fotolia.ir/press/2013/01/29/40-%D8%AF%DA%A9%D9%85%D9%87-%D8%B2%DB%8C%D8%A8%D8%A7%DB%8C-css-%D8%A7%D8%B2-%D8%B3%D8%A7%DB%8C%D8%AA-codepen.htm/ برید و کلمه 3D-ish Button رو جستجو کنید، پایینش یک دکمه (استایل + html هست) من میخوام اونو بزارم.

ارادت

ویرایش شده در مرداد 92 توسط 3245

[reza.sh 19]

از افزونه های ویرایشگر استفاده کنید امکان درج css رو به شما می دند مثل jec